检测 iFrame 中的滚动条 JS

Question

我的网页有一个嵌入的iFrame，它在我的网页中使用第三方工具，这意味着iFrame的URL来自不同的位置。

我需要检测当调整页面大小时iFrame窗口内是否出现滚动条，然后在检测到后执行任务。

我尝试了各种不同的解决方案，但都没有成功。

这是可能的吗？

非常感谢！

- Demetrios Yannikakis

---

为什么不在iframe标签中设置scrollbar=yes和resizable=yes呢？这样，如果内容超出正常视图，iframe将显示滚动条！ - M Reza Saberi

谢谢您的输入，但不太符合我的要求。我希望能够在内容超出正常视图时检测 iFrame 中的滚动条。 - Demetrios Yannikakis

在JavaScript中，您无法访问从不同域加载的任何文档- http://en.wikipedia.org/wiki/Same_origin_policy - CBroe

您提到尝试了各种不同的解决方案？可以列举一下它们，这样人们就不会只是重复之前的回答了。 - TommyBs

当然，这里有其中一个。https://dev59.com/oXRB5IYBdhLWcg3wQFLu经过进一步的研究，我发现了这个，这让我觉得这可能是不可能的。https://dev59.com/JFPTa4cB1Zd3GeqPjno4 - Demetrios Yannikakis

Answer 1

这是我想到的第一件事情：http://jsfiddle.net/matias/hhcKn/。

只是样例代码！

HTML：

<div id="body"></div>

JS：

var $iframe = $("<iframe></iframe>").appendTo("#body");
var iframe = $iframe[0];
var doc = iframe.document;

//test this
var content = "<h1>Hello world</h1><br><p>more content!</p>";

//and then this
//var content = "<h1>Hello world</h1><br><br><br><br><br><p>more content!</p>";

if(iframe.contentDocument){
    doc = iframe.contentDocument;
}
else if(iframe.contentWindow){
    doc = iframe.contentWindow.document;
}
doc.open();
doc.writeln(content);
doc.close();


//this is the part that might interest you
var div_height = $("#body").height();
var iframe_height = $("iframe").contents().height();

if(iframe_height > div_height) alert("scrollbars present");

CSS：

body{
    border: 1px solid red;
}

iframe{
    border: none;
}

- Matías Cánepa

Answer 2

<iframe src="111.html" id="iframeid" height="300" width="800"></iframe>

<script type="text/javascript">
function resizeIFrame(){
    $("#iframeid").attr("height", $("#iframeid").contents().height());
}
setInterval("resizeIFrame()", 500)
</script>

- Ricky

---

您，先生，是一个传奇。这个一行代码完美地运行，并且跨浏览器（包括iPhone）。 - Samuel MacLachlan

这仍然依赖于内容的同域来源。 - Steiny