在InAppBrowser中打開鏈接時維護標題

我正在使用離子框架來開發原生應用程序。在這裏，我在所有頁面中都有默認標題。切換到第二頁時，我需要在應用程序瀏覽器中查看外部內容。在InAppBrowser中打開鏈接時維護標題

所以，我用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，有什麼仍然是頭常量？如果我使用應用內瀏覽器，我的標題是不可見的。

來源

2015-02-10 UI_Dev

我想了解你想實現什麼。你的意思是你有這樣的東西：

包含在你的所有頁面中，並且你想要插入到一個彈出窗口中？ – Manube 2015-03-16 08:38:07

@Manube：更新我的問題..請確認 – 2015-03-16 10:29:34

你的意思是？你想打開外部網站的內容，但仍然希望保持你的佈局完整，同時查看該頁面？ – harishr 2015-03-16 14:38:41

編輯

我忽略了你的問題在應用程序的瀏覽器元素。這裏是一個更新，專門針對應用內瀏覽器。

免責聲明：以下提供的代碼均未經過測試;但是，這個答案爲您提供了實施解決方案的指導原則。

而不是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）你可以取得與應用程序內瀏覽器中的第三方網頁，掩蓋它，修改它，然後顯示它

請read this Cordova doc page。

要打開一個窗口，並保持它隱藏：

VAR REF = window.open（URL，目標， '隱藏= 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（絡合物溶液，但entirable配置）

例如Bing Search API

某些網站提供了一個API，它以裸信息響應，通常以JSON字符串的形式返回。

您可以使用JavaScript templator（如Mustache）從您獲得的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第三方網站，然後用自己的內容修改顯示，我建議你檢查了這StackOverflow的線程：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>'); }); });