Cordova RSS 提要链接不会在外部浏览器中打开
Posted
技术标签:
【中文标题】Cordova RSS 提要链接不会在外部浏览器中打开【英文标题】：Cordova RSS fed links will not open in external browser 【发布时间】：2016-05-17 15:54:40 【问题描述】：我使用英特尔 XDK 开发了一个 Cordova 应用程序。它是一个使用 Google Feed API 并使用一个自定义插件来简化 RSS 检索的选项卡式视图 RSS 聚合器。我遇到了我希望 RSS 提要链接在外部/系统浏览器而不是应用程序的 web 视图中打开的问题，但我还没有找到有效的方法来做到这一点。我已经尝试了论坛中建议的几乎所有方法（包括this、this、this、this 和this），但没有成功。无论如何，当我点击一个链接时，“加载内容”动画会出现，并且在 android 和 ios 中都没有任何反应（实际上，应用程序卡住了）。我确实安装了 InAppBrowser，尝试在配置中提供对导航、意图和访问的完全访问权限，但到目前为止没有任何效果。有人可以帮我弄清楚它是否与 Google Feed API 有关吗？
这是我的 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>
这是供稿的自定义插件：
/**
* 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);
这是应用程序本身的编码：
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');
这是配置 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>
【问题讨论】：
【参考方案1】：找到了解决方案！只需要注释掉以下部分：
link.setAttribute('href', entries[i].link);
link.setAttribute('target','_system');
然后添加一种机制来捕获链接上的所有点击并打开它们。
【讨论】：
以上是关于Cordova RSS 提要链接不会在外部浏览器中打开的主要内容，如果未能解决你的问题，请参考以下文章
如何在外部浏览器而不是应用内（instagram）中打开链接？