1
Ich habe eine Cordova-App mit Intel XDK entwickelt. Es ist ein Tabbed-View-RSS-Aggregator, der die Google Feed-API verwendet und ein benutzerdefiniertes Plug-in verwendet, um den RSS-Abruf zu vereinfachen. Ich bin auf das Problem gestoßen, dass die RSS-Feed-Links im externen/System-Browser und nicht im Webview der App geöffnet werden sollen, aber ich habe keinen effektiven Weg gefunden, dies zu tun. Ich habe fast alle Methoden hier im Forum (einschließlich this, this, this, this und this) ohne Erfolg versucht. Egal, was passiert, wenn ich auf einen Link klicke, wird die "Inhalt laden" -Animation angezeigt und nichts passiert (tatsächlich bleibt die App hängen), sowohl in Android als auch in iOS. Ich habe InAppBrowser installiert, habe versucht, vollen Zugriff auf Navigation, Absicht und Zugriff in der Konfiguration zu geben, und bisher hat nichts funktioniert. Könnte mir jemand helfen, herauszufinden, ob es vielleicht etwas mit der Google Feed API zu tun hat?Cordova RSS-Feed-Links werden nicht in einem externen Browser geöffnet
Das ist mein index.html -
<!DOCTYPE html>
<!--HTML5 doctype-->
<html>
<head>
<title>RSSAgreggator</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
#feeds { font-size: medium; font-family: helvetica;
border-left: 1px solid #ddd}
.gfc-control .gfc-resultsHeader .gfc-title { font-size: small; font-weight: bold; color: white}
.gfc-control div { font-family: helvetica }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<link rel="stylesheet" type="text/css" href="lib/appframework/icons.css" />
<link rel="stylesheet" type="text/css" href="lib/appframework/af.ui.css" />
<script type="text/javascript" charset="utf-8" src="lib/jquery.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="lib/appframework/appframework.ui.min.js"></script>
<script src='cordova.js'></script>
<script type="text/javascript" charset="utf-8" src="lib/app.js"></script>
<script type="text/javascript" charset="utf-8" src="lib/jquery.gfeed.js"></script>
<script type="text/javascript">
$(function() {
// convert anchors
$('a.feed').gFeed({ target: '#feeds', tabs: true, max: 100 });
});
</script>
</head>
<body>
<div id="splashscreen" class='ui-loader heavy'>
App Framework - Tab View
<br>
<br>
<span class='ui-icon ui-icon-loading spin'></span>
<h1>Starting app</h1>
</div>
<div class="view">
<header>
<h1>RSSAggregator</h1>
</header>
<div class="pages">
<div class="panel" data-title="Aggregator" id="tab1" >
<div id="feeds">
<a class="feed" href="http://feeds.feedburner.com/thr/news">THR</a>
<a class="feed" href="http://feeds.feedburner.com/variety/headlines">Var</a>
</div>
<div class="panel" data-title="Tags" id="tab2" >
This is view for second Tab
</div>
<div class="panel" data-title="Feeds" id="tab3">
This is view for third Tab
</div>
<div class="panel" data-title="Settings" id="tab4">
This is view for fourth Tab
</div>
</div>
<!--
<footer>
<a href="#tab1" class="icon home" onclick="$.afui.clearHistory()">Home</a>
<a href="#tab2" class="icon heart" onclick="$.afui.clearHistory()">Tags</a>
<a href="#tab3" class="icon message" onclick="$.afui.clearHistory()">Feeds</a>
<a href="#tab4" class="icon user" onclick="$.afui.clearHistory()">Settings</a>
</footer>
</div>
-->
</body>
</html>
Dies ist die für das Futter benutzerdefinierte Plug-in ist:
/**
* Plugin which uses the Google AJAX Feed API for creating feed content
* @author: M. Alsup (malsup at gmail dot com)
* @version: 1.0.2 (5/11/2007)
* Documentation and examples at: http://www.malsup.com/jquery/gfeed/
* Free beer and free speech. Enjoy!
*/
(function($) {
if (!window.google) {
alert('You must include the Google AJAX Feed API script');
return;
}
if (!google.feeds) google.load("feeds", "1");
$.fn.gFeed = function(options) {
var opts = jQuery.extend({
target: this,
max: 25 // max number of items per feed
}, options || {});
var g = new google.feeds.FeedControl();
this.each(function() {
var url = this.href || opts.url;
var title = opts.title || this.title || $(this).text();
g.addFeed(url, title);
g.setNumEntries(opts.max);
});
$(opts.target).each(function() {
g.draw(this, opts.tabs ? { drawMode: google.feeds.FeedControl.DRAW_MODE_TABBED } : null);
});
return this;
};
})(jQuery);
Dies ist die Codierung für die App selbst:
function myGetElementsByClassName(selector) {
if (document.getElementsByClassName) {
return document.getElementsByClassName(selector);
}
var returnList = new Array();
var nodes = document.getElementsByTagName('div');
var max = nodes.length;
for (var i = 0; i < max; i++) {
if (nodes[i].className == selector) {
returnList[returnList.length] = nodes[i];
}
}
return returnList;
}
var rssReader = {
containers : null,
// initialization function
init : function(selector) {
containers = myGetElementsByClassName(selector);
for(i=0;i<containers.length;i++){
// getting necessary variables
var rssUrl = containers[i].getAttribute('rss_url');
var num = containers[i].getAttribute('rss_num');
var id = containers[i].getAttribute('id');
// creating temp scripts which will help us to transform XML (RSS) to JSON
var url = encodeURIComponent(rssUrl);
var googUrl = 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num='+num+'&q='+url+'&callback=rssReader.parse&context='+id;
var script = document.createElement('script');
script.setAttribute('type','text/javascript');
script.setAttribute('charset','utf-8');
script.setAttribute('src',googUrl);
containers[i].appendChild(script);
}
},
// parsing of results by google
parse : function(context, data) {
var container = document.getElementById(context);
container.innerHTML = '';
// creating list of elements
var mainList = document.createElement('ul');
// also creating its childs (subitems)
var entries = data.feed.entries;
for (var i=0; i<entries.length; i++) {
var listItem = document.createElement('li');
var title = entries[i].title;
var contentSnippet = entries[i].contentSnippet;
var contentSnippetText = document.createTextNode(contentSnippet);
var link = document.createElement('a');
link.setAttribute('href', entries[i].link);
link.setAttribute('target','_system');
var text = document.createTextNode(title);
link.appendChild(text);
// add link to list item
listItem.appendChild(link);
var desc = document.createElement('p');
desc.appendChild(contentSnippetText);
// add description to list item
listItem.appendChild(desc);
if (entries[i].mediaGroups) {
var img = new Image();
img.src = entries[i].mediaGroups[0].contents[0].url;
listItem.appendChild(img);
}
// adding list item to main list
mainList.appendChild(listItem);
}
container.appendChild(mainList);
}
};
window.onload = function() {
rssReader.init('post_results');
}
Und das ist die Konfiguration XML:
<?xml version='1.0' encoding='UTF-8'?>
<!--This file is generated by the Intel XDK. Do not edit this file as your edits will be lost. -->
<!--To change the contents of this file, see the documentation on the intelxdk.config.additions.xml file.-->
<intelxdk:version value="1.0"/>
<intelxdk:cordova-cli version="5.4.1"/>
<content src="index.html"/>
<access origin="*"/>
<allow-intent href="*"/>
<intelxdk:plugin intelxdk:name="Device" intelxdk:value="cordova-plugin-device" intelxdk:version="1.1.1" intelxdk:checksum="927290ca" intelxdk:type="file"/>
<intelxdk:plugin intelxdk:name="Splashscreen" intelxdk:value="cordova-plugin-splashscreen" intelxdk:version="3.2.0" intelxdk:checksum="452a4659" intelxdk:type="file"/>
<intelxdk:plugin intelxdk:name="InAppBrowser" intelxdk:value="cordova-plugin-inappbrowser" intelxdk:version="1.3.0" intelxdk:checksum="20f7ee20" intelxdk:type="file"/>
<intelxdk:plugin intelxdk:name="Cordova Network Whitelist Plugin (added by Intel XDK)" intelxdk:value="cordova-plugin-whitelist" intelxdk:version="1.2.1"/>
<preference name="android-minSdkVersion" value="14"/>
<preference name="android-targetSdkVersion" value="21"/>
<preference name="android-installLocation" value="auto"/>
<preference name="android-signed" value="true"/>
<preference name="Fullscreen" value="true"/>
<preference name="splashscreen" value="splash"/>
<!--creationInfo:{"src":"jsapp/template-tab-view-js/sample.zip","projectTypeName":"com.intel.xdk.projecttype.jsapp"}-->
<preference name="debuggable" value="false"/>
<platform name="ios">
<!-- below requires the splash screen plugin -->
<!-- docs: https://github.com/apache/cordova-plugin-splashscreen -->
<preference name="AutoHideSplashScreen" value="true"/>
<preference name="FadeSplashScreen" value="false"/>
<preference name="FadeSplashScreenDuration" value="2"/>
<preference name="ShowSplashScreenSpinner" value="false"/>
<!-- below requires the status bar plugin -->
<!-- docs: https://github.com/apache/cordova-plugin-statusbar -->
<!-- see http://devgirl.org/2014/07/31/phonegap-developers-guid -->
<preference name="StatusBarOverlaysWebView" value="false"/>
<preference name="StatusBarBackgroundColor" value="#000000"/>
<preference name="StatusBarStyle" value="lightcontent"/>
</platform>
<platform name="android">
<!-- below requires the splash screen plugin -->
<!-- docs: https://github.com/apache/cordova-plugin-splashscreen -->
<preference name="SplashMaintainAspectRatio" value="false"/>
</platform>
<intelxdk:crosswalk xmlns:intelxdk="http://xdk.intel.com/ns/v1" xwalk-command-line="--disable-pull-to-refresh-effect"/>
<intelxdk:crosswalk xmlns:intelxdk="http://xdk.intel.com/ns/v1" xwalk-command-line="--ignore-gpu-blacklist"/></widget>