确定移动 pbrowsers 上 iframe 内 iframe 父容器的宽度

Question

我们的客户托管他们自己的 HTML 网页，我们将这些网页的部分内容作为嵌入的 iframe 元素提供。 （这意味着它们的内容和我们的内容具有不同的域来源。）它们通常提供包含我们的iframe 元素的div 元素。 （请注意，我们无法控制他们的网页内容，只能控制我们的iframe 内容。）

iframe 包含确定它可以填充的最大尺寸的 JavaScript 代码，它应该是外部 div 的尺寸。此最大宽度用于控制（显示/隐藏）iframe 内容中的滚动元素。

问题在于，在某些移动浏览器上，iframe 的内容未正确限制（剪辑）到其父级<div> 的大小/边界。换句话说，iframe 的尺寸比其父 div 更大（更宽）。 （这在桌面浏览器上不是问题。）

所以问题是：iframe 代码如何确定其父元素（尤其是跨域）的真正合适大小？看来，我能得到的最好结果是 iframe 本身及其子元素的外观大小。

将overflow:hidden 添加到父div 可以正确隐藏/剪辑超出div 边界的iframe 内容，但iframe 代码仍然无法确定该尺寸（宽度）实际上是什么。 （同样，这显然不是桌面浏览器的问题。）

注意：类似的问题（例如，Detect the width of an iframe from within the iframe）解决了从iframe 中访问iframe 本身的维度的问题；我需要访问iframe 的父容器的尺寸。

解决方案

我最终将iframe 元素放在它自己的div 元素中，并访问包含元素的宽度。 （iframe 似乎没有任何方法可以直接访问其父级。）

Answer 1

您的 iframe 页面必须与其他页面通信。 Here 是我在 Github 上的示例 repo，这就是我所说的......

编辑：

每个外包页面：

function windowWidth(){
    return document.getElementById('content').clientWidth;
}

iframe 页面：

window.onload = function(){

    setInterval(function(){

      var iframeWidth = document.getElementById('iframe').contentWindow.windowWidth();
      document.getElementById('iframe').style.width = iframeWidth + "px";

     }, 10);

}