编辑
我没有注意到你问题中的应用内浏览器元素。以下是针对应用内浏览器的更新。
免责声明:下面提供的代码均未经过测试;但是,本答案将为您提供实现解决方案的指南。
除了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) 您可以使用应用内浏览器获取第三方网页,将其隐藏,修改后再显示出来
请阅读此Cordova文档页面。
To open a window and keep it hidden:
var ref = window.open(url, target,'hidden=yes');
To execute a script when the hidden in-app window is ready:
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);
}
Now you can show the in-app window: ref.show();
附录:使用第三方内容的4种技巧,适用于您的应用程序:
- 如果第三方网站提供 API(比较复杂,但可完全配置)
例如:Bing Search API
一些网站提供 API,返回裸信息,通常以 JSON
字符串形式返回。
您可以使用像 Mustache 这样的 JavaScript 模板引擎从服务器端或客户端根据 JSON 响应创建 HTML。然后打开您的弹出窗口:
<div id="header"></div>
<div id="myTemplatedHTML"></div>
如果您选择客户端选项,我建议您阅读在JavaScript中插入HTML打开窗口
2a. 如果第三方网站没有提供 API: 跨站点 JavaScript 调用
请阅读此主题: 使用 jQuery AJAX 加载跨域 HTML 页面
您的 HTML 中应包含:
<div id="header"></div>
<div id="myLoadedHTML"></div>
我的LoadedHTML将填充从第三方网站获取的HTML。
我建议使用像
YQL这样的工具来获取HTML。 YQL将让您进行复杂的查询,以仅获取所需的HTML片段。
2b. 如果第三方网站没有提供API:嵌入
请查阅此主题:使用HTML5的iframe替代方案
它指出:如果您想显示跨域HTML内容(带CSS样式并使用JavaScript交互),iframe仍然是一种很好的方法
它还提到了嵌入标签:
<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主题:无法修改iframe的内容,出了什么问题?
在您的特定情况下,假设您将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>');
});
});