确定移动广告

Question

我们的客户拥有自己的HTML网页，我们会将这些网页的部分内容作为嵌入式iframe元素提供。 （这意味着它们的内容和我们的内容具有不同的域名来源。）它们通常提供包含div元素的iframe元素。 （请注意，我们无法控制他们的网页内容，只能控制我们的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 本身维度的问题1}};我需要访问iframe的父容器的维度。

解

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

Answer 1

您的iframe页面必须与其他页面对话。 Here是我在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);

}