logo标签列表

在InAppBrowser中打开链接时保留标题

javascripthtmlangularjsionic-frameworkinappbrowser
14

我正在使用Ionic框架开发原生应用。在所有页面中，我都有默认页眉。当切换到第二个页面时，我需要使用内置浏览器查看外部内容。

因此，我使用了window.open。

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

但是，当我在应用程序内浏览器中查看内容时，我需要头部保持不变。

在ionic框架中是否有可能实现这一点？ 我不需要使用iframe。它在HTML中的体积很大。

更新：

我有一个HTML文件，我正在将其注入到iframe中。就像这样

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

除了框架（iframe），是否有什么东西可以保持标题栏不变？如果我使用应用内浏览器，我的标题栏会消失。

有没有什么东西可以替代 iframe 且能够保持标题栏不变呢？如果我使用应用内浏览器的话，我的标题栏会不可见。

我正在努力理解您想要达到的目标。您是否意味着您在所有页面中都包含了类似于 <div id="header">blah blah</div> 的内容，并希望将其插入到弹出窗口中？ - Manube
@Manube：我更新了我的问题，请验证一下。 - UI_Dev
你的意思是想打开外部网站内容，但在查看该页面时仍然保持你的布局不变吗？ - harishr
当我查看外部网站内容时，ya..header需要保持不变。 - UI_Dev
answers provided below - Manube
3个回答
8

编辑

我没有注意到你问题中的应用内浏览器元素。以下是针对应用内浏览器的更新。

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

除了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种技巧，适用于您的应用程序：
  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>

我的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>');
    });
});​
1
很抱歉，inAppBrowser插件不支持此行为。在这里https://github.com/apache/cordova-plugin-inappbrowser的文档中没有列出它。
如果您具备相关知识，可以编辑iOS和Android的插件本地代码。
如果您不想涉足本地开发（可能），那么iframe是一种选择。但是，您将无法编辑iframe的内容，因为它将位于与您的应用程序不同的域中。您所能做的就是定位和调整iframe的大小，以便填充页面，并位于应用程序标题下方。
1
此插件已过时，不再维护。 - Gregdebrick
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接