JS继续加载，直到img src改变

JS Keep loading till img src changed

本文关键字：img src 改变 直到 继续 加载 JS      更新时间：2023-09-26

我想监视NAS上的卸载事件。它有一个单独的页面来卸载所有usb驱动器。我通过iframe包含了它，并希望保持站点加载，直到图像源被更改为特定源(绿色条，表明它已完成卸载)。我想让它保持加载的原因是因为我通过jquery调用它。从另一个站点获取功能，我希望它等到卸载过程完成。将是伟大的，如果这是可能的，只有在纯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>

我立即收到一个错误，元素"uiView_TestPic"不存在，即使我在运行检查之前添加超时。

包含的iFrame站点在所有图像加载完毕后立即停止加载，而不是在整个过程完成后。

首先，两个框架必须在同一个域中运行，因为如果它们是不同的域，浏览器会阻止一个框架中的代码访问另一个框架中的任何内容。如果两个帧不在同一个域中，那么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准备好的细节:我如何访问iframe内的DOM元素

如果你控制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
        }
    });

您可以检查元素是否在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") &&出现错误

相关文章：