Javascript iframe 不触发调整大小事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27846057/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Iframe does not trigger resize event
提问by ermSO
After 3 days of research and trial and error, I am not able to get the iframe nor its contents to trigger a resize event so that my resize function is called. If I use ...trigger("resize"); to manually trigger a resize event, my resize function is called and works. The page that is loaded in the iframe is on the same domain (http://localhost:81/curlExample/) as the page containing the iframe. Eventually, the page in the iframe will be a supplied by the php curl method, but I would like to get it working first.
经过 3 天的研究和反复试验，我无法获取 iframe 或其内容来触发调整大小事件，因此我的调整大小函数被调用。如果我使用 ...trigger("resize"); 要手动触发调整大小事件，我的调整大小函数被调用并起作用。在 iframe 中加载http://localhost:81/curlExample/的页面与包含 iframe 的页面位于同一域 ( ) 中。最终，iframe 中的页面将由 php curl 方法提供，但我想让它先工作。
*******Updated******** How do I get the resize event triggered when I resize the browser window which causes the iframe to adjust its size?
*******已更新******** 如何在调整浏览器窗口大小时触发调整大小事件，从而导致 iframe 调整其大小？
Thank you for your help!
感谢您的帮助！
Page with the iframe
带有 iframe 的页面
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
function setResize()
{
window.alert("Hello");
var iframeRef = document.getElementById('displayframe');
$(iframeRef).on("resize", function(){
var xExp = 0;
window.alert("Resize event fired.");
});
}
$('#displayframe').load(function()
{
alert("Hello from iFrame. Load event fired.");
var myStallTime = setTimeout(setResize, 3000);
});
});
</script>
</head>
<body>
<p id="myP">Hello</p>
<iframe id="displayframe" src="http://localhost:81/curlExample/HelloIframe.xhtml" style="height:250px; width:100%;">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>Page within the iframe (HelloIframe.xhtml)
iframe 内的页面 (HelloIframe.xhtml)
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TODO supply a title</title>
</head>
<body>
<div id="myContent" style="width:100%; height:200px;">
<h1>TODO write content</h1>
<h2>Extremity sweetness difficult behaviour he of</h2>
<p>Agreed joy vanity regret met may ladies oppose who. Mile fail as left as hard eyes. Meet made call in mean four year it to. Prospect so branched wondered sensible of up. For gay consisted resolving pronounce sportsman saw discovery not. Northward or household as conveying we earnestly believing. No in up contrasted discretion inhabiting excellence. Entreaties we collecting unpleasant at everything conviction.</p>
<p>Yet remarkably appearance get him his projection. Diverted endeavor bed peculiar men the not desirous. Acuteness abilities ask can offending furnished fulfilled sex. Warrant fifteen exposed ye at mistake. Blush since so in noisy still built up an again. As young ye hopes no he place means. Partiality diminution gay yet entreaties admiration. In mr it he mention perhaps attempt pointed suppose. Unknown ye chamber of warrant of norland arrived.</p>
</div>
</body>
</html>回答by Aurium
The <iframe>element will never trigger a resize event, like an <img>or a <div>. You must get this event from window. As your iframe document comes from the same origin as the parent document, you can access its contentWindowand any other attribue.
该<iframe>元素永远不会触发调整大小事件，例如 an<img>或 a <div>。您必须从window. 由于您的 iframe 文档与父文档来自同一来源，因此您可以访问其contentWindow和任何其他属性。
So, try this:
所以，试试这个：
var iframeWin = document.getElementById('displayframe').contentWindow;
$(iframeWin).on('resize', function(){ ... });
I did it using only DOM's addEventListener.
我只使用 DOM 的addEventListener.
var iframeWin = document.getElementById('displayframe').contentWindow;
iframeWin.addEventListener('resize', function(){ ... });
