gpt4 book ai didi

javascript - iframe 不触发 resize 事件

转载 作者:可可西里 更新时间:2023-11-01 01:49:20 29 4
gpt4 key购买 nike

经过 3 天的研究和反复试验,我无法获取 iframe 或其内容来触发调整大小事件,因此无法调用我的调整大小函数。如果我使用 ...trigger("resize");要手动触发调整大小事件,我的调整大小函数会被调用并起作用。在 iframe 中加载的页面与包含 iframe 的页面位于同一域 (http://localhost:81/curlExample/)。最终,iframe 中的页面将由 php curl 方法提供,但我想先让它工作。

*********已更新********当我调整浏览器窗口大小时导致 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>

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>

最佳答案

<iframe>元素永远不会触发调整大小事件,如 <img><div> .您必须从 window 获取此事件.由于您的 iframe 文档与父文档来自同一来源,因此您可以访问其 contentWindow以及任何其他属性。

那么,试试这个:

var iframeWin = document.getElementById('displayframe').contentWindow;
$(iframeWin).on('resize', function(){ ... });

我只使用 DOM 的 addEventListener 做到了这一点.

var iframeWin = document.getElementById('displayframe').contentWindow;
iframeWin.addEventListener('resize', function(){ ... });

关于javascript - iframe 不触发 resize 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27846057/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com