通过JavaScript设置iframe的用户代理

Question

尝试满足的业务需求：在iframe中加载现有页面，模拟iphone用户代理。需要在客户端实现这一点的原因是，有些客户端脚本会检测用户代理并将一些类追加到html元素上。基于此，站点的样式将发生根本性变化，因为CSS会基于html类来定位元素。

因此，它会将<a>转换为<a class="iphone">，并在我要解决的情况下将其转换为<a class="android">等。

在Chrome中使用window.open可以正常工作（如此代码所示）。该站点以适当的移动样式呈现。

在FF中使用iframe可以正常工作，但只能在FF中使用。

理想情况下，我希望在Chrome和FF中都可以使用iframe版本。

有什么想法吗？

<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>

- Mike

Answer 1

已解决，适用于火狐、谷歌和IE浏览器。由于我没有安装Safari浏览器，所以不确定是否适用于Safari。简而言之，方法是进行ajax请求，获取HTML，然后打开iframe的文档。在打开后，覆盖其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();
            }
        });
    });

- Mike

Answer 2

使用iframe无法做到这一点。用户代理是在初始请求的标头中发送的。

替代方案：

使用后端代理。Iframe实际上从您自己的服务器加载页面，该服务器通过代理加载远程页面。然后您可以设置任何标头。如果第三方网站不需要登录，则可以起作用，因为您不希望代理用户的会话。

如果远程站点支持CORS，则可以从您的页面执行XHR请求来设置用户代理标头并获取页面内容。然后您可以将该代码添加到iframe中。但要注意此技术存在严重的安全问题。

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

- Geuis

---

1. 我已经在使用C# WebClient请求实现代理来处理任何UA字符串。但是这并不能满足客户端的需求，因为需要使用浏览器的用户代理。
2. 我无法通过xhr（到自己的代理页面）来完成它，因为结果会导致客户端脚本针对当前浏览器的用户代理运行。
3. 在Firefox中可以工作。我想知道是否有人在Chrome中成功实现了这一点。

- Mike

有趣。你能否在jsfiddle上设置一下你目前的代码？也许能找到答案。 - Geuis