Iframe 不会触发调整大小事件
Iframe does not trigger resize event
经过 3 天的研究和反复试验,我无法让 iframe 及其内容触发调整大小事件,以便调用我的调整大小函数。 如果我使用...触发器("调整大小");要手动触发调整大小事件,将调用我的调整大小函数并正常工作。 在 iframe 中加载的页面与包含 iframe 的页面位于同一域 ( http://localhost:81/curlExample/
) 上。 最终,iframe 中的页面将由 php curl 方法提供,但我想先让它工作。
*******更新********当我调整浏览器窗口的大小时,如何触发 resize 事件,从而导致 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(){ ... });
相关文章:
- 内部分区字体大小获胜'调整浏览器窗口大小时不会随媒体查询而更改
- 调整窗口大小时,可拖动的对象会出现在容器外部
- ExtJS——在展开/折叠时调整面板高度
- Chrome应用程序调整窗口大小保持纵横比
- 如何自动调整标签的高度以适应内容
- 导航栏没有调整到浏览器屏幕的大小
- 调整屏幕大小后不显示子菜单
- 使用JavaScript根据窗口/视口的高度动态调整图像大小
- 合并两个数组,重新调整循环js
- Morris.js折线图x轴标签在调整大小后消失
- 调整缩放窗口高度提升缩放
- 调整屏幕大小时更改属性值
- 如何针对Android股票/本地浏览器来调整CSS
- 如何调整信息窗口的大小并点击按钮?+更改信息窗口的内容
- Adobe Air SDK在页面加载时调整窗口大小
- 更改屏幕上对象的宽度调整大小
- 客户端图像调整大小.任何已知问题
- 窗口大小调整事件在ie7中持续触发
- 在javascript中调整图像大小
- wordpress谷歌地图调整大小