我使用离子框架开发本机应用程序。在这里，我在所有页面中都有默认标题。当切换到第二页时，我需要应用内浏览器来查看外部内容。
所以，我使用了window.open
<a href="#" onclick="window.open('https://google.com','_blank','location=yes','closebuttoncaption=Return');">Click Here to view inapp browser</a>
但是，当我在应用内浏览器中查看内容时，我需要标题保持不变。
离子骨架中是否可能？ 我不需要iframe。它在html中很重。
更新
我有一个html文件，我注入iframe。喜欢
<div id="header"></div>
<iframe src="serveraddress/index.html"></iframe>
而不是iframe，还有什么东西仍然保持标头不变？如果我使用应用内浏览器，我的标题是不可见的。
答案 0 :(得分：6)
修改
我忽略了你问题中的应用内浏览器元素。这是一个更新，专门针对应用内浏览器。
免责声明：以下提供的代码均未经过测试;但是，这个答案为您提供了实施解决方案的指南。
而不是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）您可以使用应用内浏览器获取第三方网页，将其隐藏，修改后再显示
打开一个窗口并将其隐藏起来：
var ref = window.open（url，target，＆＃39; hidden = yes＆＃39;）;
要在隐藏的应用内窗口准备就绪时执行脚本：
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种技巧：
e.g。 Bing Search API
某些网站提供的API会以简单的信息进行响应，通常以JSON字符串的形式返回。
您可以使用Mustache之类的JavaScript模板从您获得的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 ：embed
请检查此主题：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标签：
<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>');
});
});
答案 1 :(得分：1)
我知道已经有一段时间 - 以防万一有人正在努力解决同样的问题：有一个主题版本的cordova的InAppBrowser就像一个魅力，我们最近在一个项目中使用它。
https://github.com/initialxy/cordova-plugin-themeablebrowser
答案 2 :(得分：0)
我担心inAppBrowser插件不支持此类行为。它没有列在他们的文档中 https://github.com/apache/cordova-plugin-inappbrowser
如果您有这方面的知识，可以编辑iOS和Android的插件本机代码。
如果你不想进入原生开发（可能），那么iframe就是你要走的路。但是您无法编辑iframe的内容，因为它将与您的应用程序位于不同的域中。您所能做的就是对iframe进行定位和调整大小，使其填充应用程序标题正下方的页面。