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

Question

我正在使用离子框架来开发本机应用程序.在这里,我在所有页面中都有默认标题.切换到第二页时,我需要应用内浏览器来查看外部内容.

所以,我使用了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,还有什么东西仍然保持标头不变？如果我使用应用内浏览器,我的标题是不可见的.

Answer 1

编辑

我在你的问题中忽略了应用内浏览器元素.这是一个更新,专门针对应用内浏览器.

免责声明:以下提供的代码均未经过测试; 但是,此答案为您提供了实施解决方案的指南.

而不是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文档页面.

• 要打开一个窗口并将其隐藏起来:

  var ref = window.open(url,target,'hidden = 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种技巧:

1. 如果第三方网站提供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>

myLoadedHTML将填充从第三方网站获取的HTML.

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

2B.如果第三方网站未提供API:嵌入

请检查此主题:使用html5替代iframe

它读到: 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线程:无法修改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>');
    });
});?