我正在尝试检测iframe及其内容何时加载但没有太多运气.我的应用程序在父窗口的文本字段中输入一些内容并更新iframe以提供"实时预览"
我开始使用以下代码(YUI)来检测iframe加载事件何时发生.
$E.on('preview-pane', 'load', function(){
previewBody = $('preview-pane').contentWindow.document.getElementsByTagName('body')[0];
}
Run Code Online (Sandbox Code Playgroud)
'preview-pane'是我的iframe的ID,我正在使用YUI来附加事件处理程序.但是,尝试在我的回调中访问正文(在iframe加载时)失败,我认为因为iframe在事件处理程序准备好之前加载.如果我通过使生成它的php脚本进入睡眠状态来延迟iframe加载,则此代码有效.
基本上,我问的是什么是跨浏览器的正确方法来检测iframe何时加载并且其文档已准备就绪?
我有一个带有document.onkeydown事件处理程序的页面,我将它加载到另一个页面的iframe中.我必须在iframe内部单击才能让内容页面开始"收听".
有没有什么方法可以在外部页面中使用JavaScript将焦点设置到内部页面,所以我不必在iframe内部单击?
编辑:回复评论:
上下文是主窗口是一个类似灯箱的系统,除了代替图片,它显示iframe,每个iframe是一个带有keydown/mousemove处理程序的交互式页面.这些处理程序在显示灯箱之后点击iframe之前不会触发.
我实际上并不像传统意义上的"setFocus"那样"在iframe contentDocument上启用事件处理程序"
$('#someIframe').load(function(){...})如果在iframe完成加载后附加它,它似乎不会触发.那是对的吗?
我真正喜欢的是拥有一个在加载iframe时或之后总是被调用一次的函数.为了更清楚,这里有两种情况:
我怎样才能做到这一点?
问题:较旧的知识库软件,无论出于何种原因,都有破坏的链接.它是一系列嵌套框架.有些人指向正确的目标,有些则没有,而且许多人只是被打破.当它不能顺利运行时,它会使知识库变得繁琐
我正在尝试编写的内容:我想确定特定帧何时加载,然后解析框架的文档,用正确的href和目标替换锚标记.
资源和限制:我可以访问一些.aspx页面.我现在定位的那个包含一个加载知识库文档的framset.然而,此框架的src似乎不是实际的.aspx页面(物理文件) - 不确定它是如何生成的,并且不确定文档的存储方式.我看到列出的src但在我有权访问的网络服务器上找不到它.
基本信息:使用.aspx加载页面(我不了解这部分内容并且无法访问更深入的内容)..aspx页面有一个框架集,可在加载页面时生成.
.aspx文件中的示例Framset代码:
<FRAMESET id="FrameSetMainView" runat="server" border="0" framespacing="0" frameborder="0">
<!-- This frame set is defined and generated in the code -->
</FRAMESET>
Run Code Online (Sandbox Code Playgroud)
我尝试在FRAMESET标记中添加onload (这会导致页面在尝试加载时出错).框架集接管了主体,因此我无法在页面底部添加内联脚本以使其在加载后运行.
此外,b/c的产品时代 - 它被迫进入兼容模式.因此必须使用IE7等效支持.(没有addeventlistener选项)
当前的策略: 我认为我可以开始工作,但感觉像所有人一样迷人 - 在脚本中添加脚本<head>.有点像:
<SCRIPT>
function load(){
var frameset = window.frames;
if(frameset.length > 0){ // frames have loaded - commence replacement
}else{ // frames not loaded
setTimeout(load,1000); // wait 1 sec, try again
}
}
load();
</SCRIPT>
Run Code Online (Sandbox Code Playgroud)
其他方案?
当 iframe 的内容加载时,我需要触发一个 javascript 函数。我看到很多(过时的?)使用 iframe onload 事件的答案,这似乎根本没有触发(在 Chrome 中)。
根本不触发(至少在 Chrome 中):
<iframe id="target-iframe" src="SRC_URL" onload="iframeLoaded()"></iframe>
Run Code Online (Sandbox Code Playgroud)
在内容准备好之前为 iframe 的 readyState 设置一个监听器:
function listenForIframe() {
const iframe = document.getElementById("target-iframe");
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
// Check if loading is complete
if (iframeDoc.readyState == 'complete') {
iframe.contentWindow.onload = function(){
// console.log('loaded')
};
iframeLoaded();
return;
}
window.setTimeout(listenForIframe, 100);
}
Run Code Online (Sandbox Code Playgroud)
我当前的用例是使用 iframe-resizer 并收到以下错误消息,因为 iframe 内容尚不存在。只是想在这里保持一个干净的控制台!
iframeResizer.js:791 Failed to execute
'postMessage'on'DOMWindow': The target origin('http://localhost:3000')does not match the receiver …