我想监视NAS上的卸载事件。 它有一个单独的页面来卸载所有USB驱动器。 我通过iframe将其包含在内,并希望保持网站加载,直到图像源已更改为特定来源(绿色条,表示已完成卸载)。 我想保持加载的原因是因为我通过另一个站点的jquery.get函数调用它,我希望它等到卸载过程完成。 如果仅在普通的javascript中可以实现这一点会很棒,但如果需要我还可以包含jquery。 这是我到目前为止所得到的:
<script type="text/javascript">
function check(){
if (!(document.getElementById("uiView_TestPic").src == "/css/default/images/finished_ok_green.gif")){
window.setTimeout(check(), 2000);
}else{
alert("Done!");
}}
window.onload(check());
</script></head>
<body>
<iframe seamless width="100%" frameborder="0" height="80%" src="http://fritz.box/usb/usb_diskcut.lua?usbdev=all"></iframe>
我立刻收到一个错误,即元素&#34; uiView_TestPic&#34;即使在运行check之前添加超时,也不存在。
包含的iFrame网站会在加载所有图片后立即停止加载,而不是在整个过程完成时停止加载。
答案 0 :(得分:1)
首先,两个帧必须在同一个域上运行,因为浏览器会阻止一个帧中的代码访问另一个帧中的任何内容(如果它们是不同的域)。如果两个帧不在同一个域上,则iframe必须监视自身,并在完成使用window.postMessage()
之类的操作后通知另一个帧。
如果它们位于同一个域中,则会稍微复杂一些。您必须获取iframe元素(主文档中的内容)。你必须等待它准备好(因为它必须加载它自己的内容)。然后,您必须在iframe中获取文档。然后,您可以在iframe中找到所需的图像。然后你可以观察它的内容。当然,如果iframe与主页面属于同一个域(由于安全限制),您只能执行此操作。
首先,在iframe中添加一个ID:
<iframe id="myFrame" seamless width="100%" frameborder="0" height="80%" src="http://fritz.box/usb/usb_diskcut.lua?usbdev=all"></iframe>
然后,你可以使用它:
// put this code in your document AFTER the iFrame tag
// or only run it after the DOM is loaded in your main document
function checkImageSrc(obj) {
if (obj.src.indexOf("/finished_ok_green.gif") !== -1) {
// found the green gif
// put whatever code you want here
} else {
// check repeatedly until we find the green image
setTimeout(function() {
checkImageSrc(obj);
}, 2000);
}
}
// get the iframe in my documnet
var iframe = document.getElementById("myFrame");
// get the window associated with that iframe
var iWindow = iframe.contentWindow;
// wait for the window to load before accessing the content
iWindow.addEventListener("load", function() {
// get the document from the window
var doc = iframe.contentDocument || iframe.contentWindow.document;
// find the target in the iframe content
var target = doc.getElementById("uiView_TestPic");
checkImageSrc(target);
});
仅供参考,有关等待iframe准备就绪的详细信息:How can I access the DOM elements within an iFrame
如果您控制iframe中的代码,那么实现此目的的更简洁的方法是使用window.postMessage()
在iframe中的代码完成其操作时将消息发布到父窗口。然后父窗口可以只监听该单个消息,并且它将知道操作何时完成。
这可能看起来像这样。将此代码放在iframe中:
// put this code in your document AFTER the relevant image tag
// or only run it after the DOM is loaded in your iframe
// if you can hook into the actual event that knows the unmount
// is done, that would be even better than polling for the gif to change
function checkImageSrc(obj) {
if (obj.src.indexOf("/finished_ok_green.gif") !== -1) {
// found the green gif
// notify the parent
window.parent.postMessage("unmount complete", "*");
} else {
// check repeatedly until we find the green image
setTimeout(function() {
checkImageSrc(obj);
}, 2000);
}
}
// find the target in the iframe content
var target = document.getElementById("uiView_TestPic");
checkImageSrc(target);
然后,在您的主窗口中,您将收听发布的消息,如下所示:
window.addEventListener("message", function(e) {
// make sure this is coming from where we expect (fill in the proper origin here)
if (e.origin !== "http://example.org:8080") return;
if (e.data === "unmount complete") {
// unmount is complete - put your code here
}
});
答案 1 :(得分:0)
你可以检查dom中是否有元素,然后检查src。这样的事情应该有效:
function check(){
if (document.getElementById("uiView_TestPic") && !(document.getElementById("uiView_TestPic").src == "/css/default/images/finished_ok_green.gif")){
window.setTimeout(check(), 2000);
}else{
alert("Done!");
}}
window.onload(check());
在这个Fiddle中,您将看到没有发生src null错误。但是,如果您删除document.getElementById(&#34; uiView_TestPic&#34;)&amp;&amp;你得到错误