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

问题描述

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

I'm using ionic framework to develop native app. Here, I'm having default header in all the pages. When switching over to second page, I need in-app browser to view the external content.

所以，我使用了 window.open

So, I used window.open

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

但是，当我在应用内浏览器中查看内容时，我需要标题保持不变.

But, I need the header to be constant when I am viewing the content in in-app browser.

在离子框架中可以吗?我不需要 iframe 为此.它在 html 中很重要.

Is it possible in ionic framework? I don't need iframe for this. It is heavy weighted in html.

更新:

我有一个 html 文件，我将其注入 iframe.喜欢

I m having a html file which I m injecting to iframe. like

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

除了 iframe，还有什么东西可以保持标题不变?如果我使用应用内浏览器，我的标题是不可见的.

Instead of iframe, is there anything which remains the header constant? If I use in-app browser, my header was invisible.

推荐答案

EDIT

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

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

DISCLAIMER: none of the code provided below has been tested; however, this answer gives you guidelines to implement your solution.

代替 iframe，是否有任何保持标题不变的内容?如果我使用应用内浏览器，我的标题是不可见的.(...)当我查看外部网站内容时，标题需要保持不变.

Instead of iframe, is there anything which remains the header constant? If I use in-app browser, my header was invisible.(...)Header needs to be constant when I'm viewing external website content.

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

When you use in-app browser:

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

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

it opens a popup which displays the requested URL.

您希望在应用内浏览器窗口中显示您自己的标题.我看到了两种方法来做到这一点:

You would like to have your own header displayed in the in-app browser window. I see two ways to do this:

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

自定义网页可能包含一些第三方 HTML，使用下面提到的 4 种技术之一.参见技术 1、2a、2b 和 2c.

The customised webpage could have included some third party HTML, using one of the 4 techniques mentioned below. See techniques 1, 2a, 2b and 2c.

假设您在服务器上存储了一个自定义网页，如下所示:

Say you store a customised webpage on your server which is like so:

<div id="header"></div>
<div id="main"></div>

页面存储在您自己的服务器上，网址为:www.myserver.com

The page is stored on your own server, at url: www.myserver.com

如果您进行通话，例如:window.open('http://www.myserver.com',...) 您将显示您的自定义页面，带有您自己的标题.

If you make your in-call like: window.open('http://www.myserver.com',...) you would display your customised page, with your own headers.

B) 您可以使用应用内浏览器获取第三方网页，将其隐藏，修改，然后显示

请阅读此 Cordova 文档页面.

打开一个窗口并保持隐藏:

To open a window and keep it hidden:

var ref = window.open(url, target,'hidden=yes');

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);
}

现在您可以显示应用内窗口:ref.show();

附录:在您的应用中使用第三方内容的 4 种技巧:

APPENDIX: 4 techniques to use third-party content in your apps:

例如必应搜索 API

一些网站提供了一个 API，它以裸信息进行响应，通常以 JSON 字符串的形式返回.

Some websites provide an API, which responds with bare information, usually returned in the form of a JSON string.

您可以使用像 Mustache 这样的 JavaScript 模板来根据您的 JSON 响应创建 HTML得到了，无论是服务器端还是客户端.然后你打开你的弹出窗口:

You can use a JavaScript templator like Mustache to create your HTML from the JSON response you got, either server-side or client side. Then you open your popup:

<div id="header"></div>
<div id="myTemplatedHTML"></div>

如果您选择客户端选项，我建议您阅读 open插入 html 的 javascript 窗口

If you go for the client-side option, I suggest you read open window in javascript with html inserted

2a.如果第三方网站没有提供API:跨站javascript调用

2a. If the third-party website does not provide an API: cross-site javascript call

请阅读此线程:使用 jQuery AJAX 加载跨域 html 页面

你会在你的 HTML 中:

You would have in your HTML:

<div id="header"></div>
<div id="myLoadedHTML"></div>

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

And the myLoadedHTML would be filled with HTML fetched from the third-party website.

我建议使用像 YQL 这样的工具来获取 HTML.YQL 可让您进行复杂的查询，以获取所需的 HTML 部分.

I recommend to use a tool like YQL to fetch the HTML. YQL will let you make complex queries to fetch just the bits of HTML you need.

2b.如果第三方网站不提供 API:嵌入

请查看此线程:带有 html5 的 iframe 的替代方案

它是这样写的:如果你想显示跨域的 HTML 内容(使用 CSS 样式并与 javascript 交互)iframe 仍然是一个很好的方式

它还提到了嵌入标签:

<embed src="http://www.somesite.com" width=200 height=200 /></embed>

就您而言，您可能可以通过以下方式实现目标:

In your case, you could probably achieve your goal with something like:

<div id="header"></div>
<embed src="http://www.somesite.com" width=200 height=200 /></embed>

2c.如果第三方网站不提供API:iframe

或者，如果你想在 iframe 中显示第三方网站，然后用你自己的内容修改显示，我建议你检查这个 StackOverflow 线程:无法修改 iframe 的内容，是什么问题?

Alternatively, should you want to display a third-party website in an iframe, and then modify the display with your own content, I suggest you check this StackOverflow thread: Cannot modify content of iframe, what is wrong?

在您的特定情况下，假设您将 iframe 命名为 myIframe:

In your particular case, say you named your iframe myIframe:

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

然后您可以通过以下方式实现您的目标:

You could then achieve your goal with something like this:

$(document).ready(function(){
    $('#myIframe').ready(function(){
        $(this).contents().find('body').before('<div id="header"></div>');
    });
});​