在InAppBrowser中打开链接时维护标题

我正在使用离子框架来开发原生应用程序。在这里，我在所有页面中都有默认标题。切换到第二页时，我需要在应用程序浏览器中查看外部内容。在InAppBrowser中打开链接时维护标题

所以，我用window.open

<a href="#" onclick="window.open('https://google.com','_blank','location=yes','closebuttoncaption=Return');">Click Here to view inapp browser</a>

但是，我需要的头时，我在应用程序内浏览器中查看内容是常数。

离子框架可能吗？我不需要iframe。它在html中很重。

更新：

我米具有我米注入到iframe中的html文件。像

<div id="header"></div> 
<iframe src="serveraddress/index.html"></iframe>

而不是iframe，有什么仍然是头常量？如果我使用应用内浏览器，我的标题是不可见的。

来源

2015-02-10 UI_Dev

我想了解你想实现什么。你的意思是你有这样的东西：

包含在你的所有页面中，并且你想要插入到一个弹出窗口中？ – Manube 2015-03-16 08:38:07

@Manube：更新我的问题..请确认 – 2015-03-16 10:29:34

你的意思是？你想打开外部网站的内容，但仍然希望保持你的布局完整，同时查看该页面？ – harishr 2015-03-16 14:38:41

编辑

我忽略了你的问题在应用程序的浏览器元素。这里是一个更新，专门针对应用内浏览器。

免责声明：以下提供的代码均未经过测试;但是，这个答案为您提供了实施解决方案的指导原则。

而不是iframe，有没有什么保持头常量？如果我使用应用内浏览器，我的标题是不可见的（...）当我查看外部网站内容时，标题需要保持不变。

当您使用应用内浏览器：

<a href="#" onclick="window.open('https://google.com','_blank','location=yes','closebuttoncaption=Return');">Click Here to view inapp browser</a>

打开显示所请求的URL的弹出。

您希望在应用内浏览器窗口中显示自己的标题。我看到了两种方法：

A）您可以自定义要在应用内浏览器中显示的网页，并将其存储在服务器上。

定制的网页可能包含一些第三方HTML，使用下面提到的4种技术之一。参见技术1,2a，2b和2c。

说你存储在服务器上的自定义网页是像这样：

<div id="header"></div> 
<div id="main"></div>

将网页存储在自己的服务器上，在网址：www.myserver.com

如果让您在呼叫样：window.open('http://www.myserver.com',...)你会用自己的标题显示你的自定义页面。

B）你可以取得与应用程序内浏览器中的第三方网页，掩盖它，修改它，然后显示它

请read this Cordova doc page。

要打开一个窗口，并保持它隐藏：

VAR REF = window.open（URL，目标， '隐藏= YES'）;

var iabRef = null; 
function insertMyHeader() { 
iabRef.executeScript({ 
    code: "var b=document.querySelector('body'); var a=document.createElement('div');document.createTextNode('my own header!'); a.appendChild(newContent);b.parentNode.insertBefore(a,b);" 
}, function() { 
    alert("header successfully added"); 
}); 
} 
function iabClose(event) { 
    iabRef.removeEventListener('loadstop', replaceHeaderImage); 
    iabRef.removeEventListener('exit', iabClose); 
} 

function onDeviceReady() { 
iabRef = window.open('http://apache.org', '_blank', 'location=yes'); 
iabRef.addEventListener('loadstop', insertMyHeader); 
iabRef.addEventListener('exit', iabClose); 
}

现在可以显示在应用程序的窗口：ref.show();

附录

要当隐藏在应用程序内窗口已准备好执行脚本：在您的应用中使用第三方内容的4种技术：

如果第三方网站提供API（络合物溶液，但entirable配置）

例如Bing Search API

某些网站提供了一个API，它以裸信息响应，通常以JSON字符串的形式返回。

您可以使用JavaScript templator（如Mustache）从您获得的JSON响应中创建HTML，无论是服务器端还是客户端。然后，你打开你的弹出：

<div id="header"></div> <div id="myTemplatedHTML"></div>

如果你去为客户端选项，我建议你阅读open window in javascript with html inserted

2A。 如果第三方网站不提供API：跨站点JavaScript调用

请阅读此线程：Loading cross domain html page with jQuery AJAX

你会在你的HTML：

<div id="header"></div> <div id="myLoadedHTML"></div>

而且myLoadedHTML将填充从第三方网站获取的HTML。

我建议使用像YQL这样的工具来获取HTML。 YQL将允许您进行复杂的查询来获取所需的HTML位。

2b。如果第三方网站不提供API：嵌入

请检查此线程：alternatives to iframes with html5

它读取：if you want to display cross domain HTML contents (styled with CSS and made interactive with javascript) iframe stays as a good way to do

它还提到了嵌入标签：

<embed src="http://www.somesite.com" width=200 height=200 /></embed>

就你而言，你可以用类似的方法实现你的目标：

<div id="header"></div> <embed src="http://www.somesite.com" width=200 height=200 /></embed>

2c。如果第三方网站不提供API：iframe的

或者，你应该要显示在iframe第三方网站，然后用自己的内容修改显示，我建议你检查了这StackOverflow的线程：Cannot modify content of iframe, what is wrong?

你的具体情况，说你叫你的iframe myIframe：
：

<iframe src="serveraddress/index.html" id="myIframe"></iframe>

然后，您可以用这样的实现你的目标
$(document).ready(function(){ $('#myIframe').ready(function(){ $(this).contents().find('body').before('<div id="header"></div>'); }); });