3

満たそうとするビジネス要件: iframe 内に既存のページをロードし、iPhone ユーザー エージェントをエミュレートします。これがクライアント側で発生する必要がある理由は、ユーザー エージェントを検出し、いくつかのクラスを html 要素に追加するクライアント側スクリプトがあるためです。これに基づいて、CSS が html クラスに基づく要素を対象とするため、サイトのスタイルは根本的に変化します。

したがって、ここで解決しようとしている場合は、それをまたはに変えます。

window.open の使用は、(このコードで示されているように) クロム内で機能します。サイトは適切なモバイル スタイルで表示されます。

iframe の使用は機能しますが、FF でのみ機能します。

理想的には、iframe バージョンを Chrome と FF 内で動作させたいと考えています。

何かご意見は？

<script type="text/javascript">


        navigator.__defineGetter__('userAgent', function () {
            return 'Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_2 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8H7 Safari/6533.18.5';
        });

        var win = window.open('/home/get');
        win.navigator.__defineGetter__('userAgent', function () {
            return 'Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_2 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8H7 Safari/6533.18.5';
        });
        win.location.href = '/home/get'; //required


        $(function () {
            var frame = $('<iframe width="320" height="480"></iframe>');
            frame.hide();
            $('#container').append(frame);


            (frame[0].contentWindow || frame[0].contentDocument).navigator.__defineGetter__('userAgent', function () {
                return 'Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_2 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8H7 Safari/6533.18.5';
            });
            frame.attr('src', '/home/get');

            });


            frame.fadeIn();
        });
    </script>
4

2 に答える 2

2

それを理解して、FF、Chrome、IEで動作します。Safariはインストールしていないのでわかりません。その概要は、ajax リクエストを作成し、html をフェッチしてから、iframes ドキュメントを開くことです。それを開いた後、その userAgent ゲッターをオーバーライドしてから、ajax 呼び出しから受け取った html を書き込みます。

        $(function () {
        var frame = $('<iframe width="320" height="480"></iframe>');
        frame.hide();

        $('#container').append(frame);
        var contentWindow = frame[0].contentWindow || frame[0].contentDocument;

        var setUA = function() {
            if (Object.defineProperty) {
                Object.defineProperty(contentWindow.navigator, 'userAgent', {
                    configurable: true,
                    get: function () {
                        return 'Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_2 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8H7 Safari/6533.18.5';
                    }
                });
            } else if (Object.prototype.__defineGetter__) {
                contentWindow.navigator.__defineGetter__('userAgent', function () {
                    return 'Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_2 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8H7 Safari/6533.18.5';
                });
            } else {
                alert('browser not supported');
            }
        };

        $.ajax({
            cache: false,
            url: '/home/get',
            success: function (html) {
                contentWindow.document.open();
                setUA();
                contentWindow.document.write(html);
                contentWindow.document.close();
                frame.fadeIn();
            }
        });
    });
于 2013-01-10T19:17:56.620 に答える
0

iframe ではこのようなことはできません。ユーザー エージェントは、最初の要求でヘッダーと共に送信されます。

代替案:

バックエンド プロキシを使用します。iframe は実際には、プロキシ経由でリモート ページをロードしている独自のサーバーからページをロードしています。その後、必要なヘッダーを設定できます。これは、ユーザーのセッションをプロキシしたくないため、サードパーティのサイトがログインを必要としない場合にのみ機能します。

リモート サイトが CORS をサポートしている場合は、ユーザー エージェント ヘッダーを設定してページのコンテンツを取得する XHR 要求をページから実行できます。その後、そのコードを iframe に追加できます。この手法には重大なセキュリティ上の問題があることに注意してください。

私のお勧めは、別の行動計画を考え出すことです。

于 2013-01-10T00:12:38.473 に答える