3

试图满足的业务需求：在 iframe 中加载现有页面，模拟 iphone 用户代理。这需要在客户端发生的原因是有客户端脚本可以检测用户代理并将一些类附加到 html 元素上。基于此，网站的样式将彻底改变，因为 CSS 以基于 html 类的元素为目标。

因此，它将把它变成或在我试图在这里解决的情况下等等。

在 chrome 中使用 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 getter，然后编写从 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 实际上是从您自己的服务器加载页面，该服务器通过代理加载远程页面。你可以设置任何你想要的标题。这仅在 3rd 方站点不需要登录时才有效，因为您不想代理用户的会话。

如果远程站点支持 CORS，您可以从您的页面发出 XHR 请求，该请求设置用户代理标头并取回页面内容。然后，您可以将该代码添加到 iframe 中。当心这种技术的严重安全问题。

我的建议是，想出一个不同的行动计划。

于 2013-01-10T00:12:38.473 回答