web-dev-qa-db-ja.com

異なるユーザーエージェントでiframeコンテンツを読み込む

異なるユーザーエージェントでiframeを読み込むことはできますか? iframeにモバイルユーザーエージェントを使用すると、アプリがモバイルサイトをホバーポップアップとして表示するのに役立ちます。

たとえば、Googleは、ユーザーエージェントがモバイルエージェントのものである場合にのみ、モバイル検索結果ページを表示します。

代替ソリューションはありますか、またはこのアイデアに関与するセキュリティリスクはありますか?

17

まず、ユーザーエージェント文字列を変更する関数を作成する必要があります。

function setUserAgent(window, userAgent) {
    if (window.navigator.userAgent != userAgent) {
        var userAgentProp = { get: function () { return userAgent; } };
        try {
            Object.defineProperty(window.navigator, 'userAgent', userAgentProp);
        } catch (e) {
            window.navigator = Object.create(navigator, {
                userAgent: userAgentProp
            });
        }
    }
}

次に、iframe要素をターゲットにする必要があります。

setUserAgent(document.querySelector('iframe').contentWindow, 'Aakash Chakravarthy Mobile Agent');

IDをiframeに設定して、ページ上のすべてのiframe要素の代わりにIDをターゲットにすることもできます。

9
Aero Wang

あなたはJavaScriptでそれを行うことができます:

navigator.__defineGetter__('userAgent', function(){
    return 'foo' // customized user agent
});

navigator.userAgent; // 'foo'

ただし、これは特定の数のブラウザでのみ機能します。

この質問を参照してください: JavaScriptでユーザーエージェントをモックしますか?

7
Fluidbyte

別のユーザーエージェントでリクエストを行うプロキシを作成し、プロキシを介してiframeコンテンツを読み込むことができます。

6
Billy Moon

私が見るところから、あなたには2つの解決策があります:

  • ほとんどのウェブサイトはユーザーエージェントごとにレンダリングせず、ユーザーエージェントを認識してユーザーをモバイルビューにリダイレクトし、別のドメイン(http://m.youtube.com/など)またはその他のドメインから到達可能です。 URLセグメント。ドキュメントを確認し、モバイルURLを取得して、iframeに読み込むだけです。

  • もう1つの解決策は、iframeをアプリケーションに向けて、バックエンドからドキュメントをフェッチすることです。その後、リクエストのユーザーエージェントを変更できます。

HTMLからリクエストヘッダーに影響を与えることは不可能です。しかし、JavaScriptでそれを行うことができます。

1
ChuckE