web-dev-qa-db-ja.com

InAppBrowserでリンクを開くときにヘッダーを維持する

ionicフレームワークを使用してネイティブアプリを開発しています。ここでは、すべてのページにデフォルトのヘッダーがあります。2番目のページに切り替えるときは、外部を表示するためにアプリ内ブラウザーが必要です。コンテンツ。

そこで、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では重みがあります。

更新：

Iframeに挿入しているhtmlファイルを持っています。お気に入り

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

Iframeの代わりに、ヘッダーを一定に保つものはありますか？アプリ内ブラウザを使用すると、ヘッダーが表示されませんでした。

javascripthtmlangularjsionic-frameworkinappbrowser
13
UI_Dev

[〜＃〜]編集[〜＃〜]

あなたの質問ではアプリ内ブラウザ要素を無視していました。これは、特にアプリ内ブラウザー用の更新です。

[〜＃〜]免責事項[〜＃〜]：以下に提供されているコードはいずれもテストされていません。ただし、この回答は、ソリューションを実装するためのガイドラインを提供します。

iframeの代わりに、ヘッダーを一定に保つものはありますか？アプリ内ブラウザーを使用している場合、ヘッダーは表示されませんでした。（...）外部のWebサイトのコンテンツを表示しているときは、ヘッダーを一定にする必要があります。

アプリ内ブラウザを使用する場合：

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

要求されたURLを表示するポップアップが開きます。

アプリ内ブラウザウィンドウに独自のヘッダーを表示したいとします。これを行うには2つの方法があります。

A）アプリ内ブラウザに表示するWebページを事前にカスタマイズして、サーバーに保存することができます。

カスタマイズされたWebページには、以下の4つの手法のいずれかを使用して、サードパーティのHTMLを含めることができます。テクニック1、2a、2b、および2cを参照してください。

次のようなカスタマイズされたWebページをサーバーに保存するとします。

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

このページは、URL：_www.myserver.com_にある独自のサーバーに保存されます。

window.open('http://www.myserver.com',...)のように通話を行うと、カスタマイズしたページが独自のヘッダーとともに表示されます。

B）アプリ内ブラウザでサードパーティのウェブページを取得し、非表示にして、変更してから表示することができます

このCordovaドキュメントページを読んでください 。

  • ウィンドウを開いて非表示にするには：

    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つのテクニック：

  1. サードパーティのWebサイトがAPIを提供している場合（複雑なソリューションですが、構成可能です）

例えば Bing Search API

一部のWebサイトは、通常JSON文字列の形式で返される裸の情報で応答するAPIを提供します。

Mustache のようなJavaScriptテンプレーターを使用して、サーバー側またはクライアント側のいずれかで取得したJSON応答からHTMLを作成できます。次に、ポップアップを開きます。

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

クライアント側のオプションを選択する場合は、 htmlを挿入したJavaScriptでウィンドウを開く を読むことをお勧めします。

2a。 サードパーティのWebサイトがAPIを提供していない場合：クロスサイトスクリプティング呼び出し

このスレッドをお読みください： jQuery AJAXを使用したクロスドメインHTMLページの読み込み

HTMLに次のようになります。

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

また、myLoadedHTMLは、サードパーティのWebサイトから取得したHTMLで埋められます。

[〜＃〜] yql [〜＃〜] のようなツールを使用してHTMLをフェッチすることをお勧めします。 YQLを使用すると、複雑なクエリを実行して、必要なHTMLのビットだけをフェッチできます。

2b。 サードパーティのWebサイトがAPIを提供していない場合：埋め込み

このスレッドを確認してください： html5を使用したiframeの代替

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。 サードパーティのWebサイトがAPIを提供していない場合：iframe

または、サードパーティのWebサイトを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>');
    });
});​
_
7
Manube

しばらく経ちましたが、誰かが同じ問題に苦しんでいる場合に備えて、チャームのように機能するコルドバのInAppBrowserのテーマバージョンがあり、最近プロジェクトで使用しました。

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

1
Dani

InAppBrowserプラグインはそのような動作をサポートしていないのではないかと思います。こちらのドキュメントには記載されていません https://github.com/Apache/cordova-plugin-inappbrowser

そのような知識があれば、iOSおよびAndroid用のプラグインネイティブコードを編集できます。

（おそらく）ネイティブ開発に参加したくない場合は、iframeが最適です。ただし、iframeはアプリケーションとは異なるドメインにあるため、iframeのコンテンツを編集することはできません。アプリケーションヘッダーのすぐ下のページに表示されるように、iframeの位置とサイズを設定するだけです。

0
gafi