使用不同的用户代理加载 iframe 内容

问题描述 投票：0回答：6

是否可以使用不同的用户代理加载 iframe ？使用 iframe 的移动用户代理将帮助我的应用程序将移动网站显示为悬停弹出窗口。

例如，只有当用户代理来自移动设备时，Google 才会显示移动搜索结果页面。

是否有任何替代解决方案或者这个想法是否涉及任何安全风险？？

html browser popup
6个回答
10
投票

首先，您必须创建一个函数来更改用户代理字符串：

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'
);

您还可以为 iframe 设置一个 ID，并定位该 ID，而不是页面上的所有 iframe 元素。

7
投票

您可以使用 JavaScript 来完成：

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

navigator.userAgent; // 'foo'

但是，这仅适用于选定数量的浏览器。

看到这个问题：Mocking a useragent in javascript?

6
投票

您可以创建一个代理，使用不同的用户代理发出请求，然后通过代理加载 iframe 内容。

1
投票

据我所知，你有两种解决方案：

  • 大多数网站不会根据用户代理进行渲染，它们只是识别用户代理并将用户重定向到移动视图，可以在不同的域下访问（例如，http://m.youtube.com/）或其他一些 URL 段。您只需检查他们的文档，获取他们的移动 URL 并将其加载到 iframe 中。

  • 另一个解决方案是将 Iframe 指向您的应用程序，然后从后端获取文档。然后您可以更改请求用户代理。

HTML 不可能影响请求标头。但你可以用 JavaScript 来做到这一点。

0
投票

以下有可能有效：

  • 请求的网站在响应中提供允许的 CORS 标头，例如
    Access-Control-Allow-Origin: *
    可以通过ajax加载
  • 浏览器支持在 XHR 中更改用户代理（显然规范不再禁止）

const MOBILE_UA = 'Mozilla/5.0 (iPhone;...'  // copy from your dev tools
const YOUR_IFRAME_SRC_URL = 'https://example.com';

const iframe = document.createElement('iframe');

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4) {
    // might need some escaping of xhr.response here
    iframe.srcdoc = xhr.response;
    document.body.appendChild(iframe);
  }
};
xhr.open("GET", YOUR_IFRAME_SRC_URL);
xhr.setRequestHeader('User-Agent', MOBILE_UA);  // succeeds in FF anyhow
xhr.send();
-3
投票

我猜想可能只会更改整个浏览器窗口或选项卡的用户代理信息。通过在不同时间加载 iframe，我们可以在加载之间更改用户代理，以便在一个页面上获得两个不同的 iframe，其中包含不同的用户代理相关内容。我用一个简单的示例页面对此进行了测试：

<!DOCTYPE html> <html> <body>
<iframe src="http://whatsmyuseragent.com/" name="mobile" width="60%" height="400px"></iframe>
<a href="http://whatsmyuseragent.com/" target="mobile">Mobile Spoof</a>
<iframe src="http://whatsmyuseragent.com/" name="pc" width="60%" height="400px" ></iframe>
</body> </html>

在 Firefox 36.0.1 中加载此页面后，我使用用户代理切换器扩展 https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/ 选择 iPhone 3.0，然后然后单击“移动欺骗”链接重新加载该框架。那时我看到同一页面在每个 iframe 中显示不同的用户代理。我确信页面加载或重新加载计时可以使用 setTimeout() 方法或者通过事件处理程序来自动化。我不确定如何自动执行用户代理切换。我尝试了 Aero Windwalker 建议的 setUserAgent 函数，但无法让它在 Firefox 36 或 Chrome 41 中工作。我还想创建一个可以很好地完成此操作的页面。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.