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

Question

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

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

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

因此，问题是 ： iframe代码如何确定其父元素（尤其是跨域）的正确大小？ 看来，我能得到的最好的就是iframe本身及其子元素的外观尺寸。

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

注意：类似的问题（例如， 从检测的iframe中的iframe的宽度 ）地址访问的尺寸的问题iframe从在其自身内iframe ; 我需要访问iframe父容器的尺寸。

解

我最终将iframe元素放置在其自己的div元素中，并访问了该包含元素的宽度。 （ iframe似乎无法直接访问其父级。）

Answer 1

您的iframe页面必须与其他页面对话。 这是我在Github上的示例仓库，这就是我在说的...

编辑：

每个外包页面：

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

}