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

Posted 2023-03-05

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

【英文标题】：Maintaining Header when Opening Link in InAppBrowser

【发布时间】：2015-04-10 14:36:54

【问题描述】：

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

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

【问题讨论】：

我正在尝试了解您希望达到的目标。你的意思是你有类似的东西： blah blah 包含在你的所有页面中，并且你想在弹出窗口中插入？

@Manube: 更新了我的问题..请验证

你的意思是？您想打开外部网站内容，但仍想在查看该页面时保持布局不变？

ya..header 在查看外部网站内容时需要保持不变。

下面提供的答案

【参考方案1】：

编辑

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

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

除了 iframe，还有什么东西保持标头不变？如果我使用应用内浏览器，我的标题是不可见的。(...)当我查看外部网站内容时，标题需要保持不变。

当您使用应用内浏览器时：

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

它会打开一个显示请求的 URL 的弹出窗口。

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

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

使用下面提到的 4 种技术之一，自定义网页可能包含一些第三方 HTML。请参阅技术 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, 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 种技术：

---

如果第三方网站提供 API（复杂的解决方案，但完全可以配置）

例如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：嵌入

请查看此主题：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 中显示第三方网站，然后用你自己的内容修改显示，我建议你查看这个 *** 线程：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>');
    );
);​

【参考方案2】：

恐怕 inAppBrowser 插件不支持这种行为。它没有在他们的文档中列出 https://github.com/apache/cordova-plugin-inappbrowser

如果有相关知识，您可以编辑ios和android的插件原生代码。

如果您不想进入原生开发（可能），那么 iframe 是您的最佳选择。但是您将无法编辑 iframe 的内容，因为它与您的应用程序位于不同的域中。您所能做的就是定位和调整 iframe 的大小，使其填满应用程序标题正下方的页面。

【参考方案3】：

我知道这已经有一段时间了——以防万一有人遇到同样的问题：cordova 的 InAppBrowser 有一个主题版本，它的工作原理非常棒，我们最近在一个项目中使用了它。

https://github.com/initialxy/cordova-plugin-themeablebrowser

【讨论】：

此插件已弃用，不再维护