I've developed a Cordova app using Intel XDK. It's a tabbed-view RSS aggregator using the Google Feed API and using one custom plugin to simplify the RSS retrieval. I've run into the issue that I want the RSS feed links to open in the external/system browser rather than the webview of the app, but I haven't found an effective way to do it. I've tried almost all the methods suggested here in the forum (including this, this, this, this, and this) with no success. No matter what, when I click a link, the "load content" animation will show up and nothing happens (actually, the app gets stuck), both in Android and iOS. I do have InAppBrowser installed, have tried giving full access to navigation, intent, and access in the configuration, and nothing has worked thus far. Could someone help me figure out if it's perhaps something related to the Google Feed API?
This is my 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>
This is the custom plugin for the feed:
/**
* 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);
This is the coding for the app itself:
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');
}
And this is the configuration 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>
