Javascript JS继续加载，直到img src更改
我想监视NAS上的卸载事件。 它有一个单独的页面来卸载所有usb驱动器。 我已经通过iframe将其包括在内，并希望保持站点加载，直到图像源被更改为特定的源（一个绿色条，表示它已完成卸载）。 我之所以想继续加载它，是因为我从另一个站点通过jquery.get函数调用它，我希望它等到卸载过程完成。 如果这只在普通javascript中可能，那就太好了，但如果需要，我还可以包括jquery。 以下是我到目前为止得到的信息：Javascript JS继续加载，直到img src更改,javascript,jquery,image,src,Javascript,Jquery,Image,Src,我想监视NAS上的卸载事件。 它有一个单独的页面来卸载所有usb驱动器。 我已经通过iframe将其包括在内，并希望保持站点加载，直到图像源被更改为特定的源（一个绿色条，表示它已完成卸载）。 我之所以想继续加载它，是因为我从另一个站点通过jquery.get函数调用它，我希望它等到卸载过程完成。 如果这只在普通javascript中可能，那就太好了，但如果需要，我还可以包括jquery。 以下是我到目前为止得到的信息： <script type="text/javascript">
<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>
函数检查（）{
if（！（document.getElementById（“uiView\u TestPic”）.src=“/css/default/images/finished\u ok\u green.gif”））{
setTimeout（check（），2000）；
}否则{
警报（“完成！”）；
}}
window.onload（check（））；
包含的iFrame站点在加载所有图像后立即停止加载，而不是在整个过程完成后停止加载。您可以检查元素是否在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());
在这里，您将看到src null错误没有发生。但是，如果删除document.getElementById（“uiView_TestPic”）&首先会出现错误，这两个框架必须在同一个域上运行，因为浏览器会阻止一个框架中的代码访问另一个框架中的任何内容（如果它们是不同的域）。如果这两个帧不在同一个域上，那么iframe将必须监视自己，并在完成使用类似的内容时通知另一个帧 如果它们在同一个域上，这就有点复杂了。您必须获得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 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);
如果您控制iframe中的代码，那么实现这一点的一种更为简洁的方法是在iframe中的代码完成其操作时将消息发布到父窗口。然后父窗口可以只侦听该消息，它将知道操作何时完成 可能看起来像这样。将此代码放入iframe：
<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 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
}
});
#uiView_TestPicuiView_TestPic文档getElementById（）\uiView\u TestPicdocument.getElementById（“uiView\u TestPic”）window.postMessage（）window.postMessage（）window.postMessage（）