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

Question

提问by UI_Dev

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.

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

So, I used window.open

所以，我使用了 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.

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

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

在离子框架中可能吗？我不需要 iframe 为此。它在 html 中很重要。

Updated:

更新：

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

我有一个 html 文件，我正在将其注入 iframe。喜欢

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

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

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

Answer 1

回答by Manube

EDIT

编辑

I had disregarded the in-app browser element in your question. Here is an update, specifically for in-app browser.

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

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

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

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.

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

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>

it opens a popup which displays the requested URL.

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

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

您希望在应用程序内浏览器窗口中显示您自己的标题。我看到有两种方法可以做到这一点：

A) You could customise the webpage you want to display in your in-app browser beforehand, and store it on your server.

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

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.

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

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

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

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

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

该页面存储在您自己的服务器上，网址为： 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.

如果您在通话中进行这样的操作：window.open('http://www.myserver.com',...)您将显示您的自定义页面，并带有您自己的标题。

B) You could fetch the third party webpage with in-app browser, keep it hidden, modify it, then display it

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

Please read this Cordova doc page.

请阅读此 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();

要打开一个窗口并将其隐藏：
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();

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

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

If the third-party website provides an API(complex solution, but entirable configurable)

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

e.g. Bing Search API

例如必应搜索 API

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

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

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

您可以使用像Mustache这样的 JavaScript 模板从服务器端或客户端获得的 JSON 响应创建 HTML。然后你打开你的弹出窗口：

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

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

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

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

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

Please read this thread: Loading cross domain html page with jQuery AJAX

请阅读此主题：使用 jQuery AJAX 加载跨域 html 页面

You would have in your HTML:

你会在你的 HTML 中：

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

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

并且 myLoadedHTML 将填充从第三方网站获取的 HTML。

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

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

2b. If the third-party website does not provide an API: embed

2b. 如果第三方网站没有提供API：嵌入

Please check this thread: alternatives to iframes with html5

请检查此线程：替代 iframes with html5

It reads that: 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

它写道： 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

It also mentions the embed tag:

它还提到了嵌入标签：

<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. If the third-party website does not provide an API: iframe

2c。如果第三方网站没有提供API：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中显示第三方网站，然后用你自己的内容修改显示，我建议你检查这个StackOverflow线程：无法修改iframe的内容，有什么问题？

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

在您的特定情况下，假设您将 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>');
    });
});?

Answer 2

回答by Dani

I know it's been a while – just in case somebody is struggling with the same issues: There's a themeable version of cordova's InAppBrowser which is working like a charm, we used it recently in a project.

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

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

Answer 3

回答by gafi

I'm afraid the inAppBrowser Plugin does not support such behavior. It's not listed on their docs here https://github.com/apache/cordova-plugin-inappbrowser

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

You can edit the plugin native code for iOS and Android, if have such knowledge.

如果有这些知识，您可以编辑 iOS 和 Android 的插件本机代码。

If you don't want to get into native development (probably), then iframe is the way to go. But you won't be able to edit the contents of the iframe because it will be in a different domain from your application. All you can do is position and size the iframe so that it fills the page right below you application header.

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

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

提问by UI_Dev

回答by Manube

回答by Dani

回答by gafi

相关推荐

最近更新

标签

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

提问by UI_Dev

回答by Manube

回答by Dani

回答by gafi

相关推荐

javascript 打印 1-100 的偶数，每行 5 个数字

javascript 以与另一个数组相同的顺序对数组进行排序

javascript angularjs datepicker 动态设置最大日期和最小日期

javascript 双击表格行时的 Bootstrap 弹出窗口

相关推荐

最近更新

标签