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

Question

I want to monitor an unmount event on my NAS. 我想监视NAS上的卸载事件。 it has a seperate page to unmount all usb drives. 它有一个单独的页面来卸载所有USB驱动器。 I've included it via iframe and want to keep the site loading until the image source has been changed to a specific source (a green bar, indicating that it has done unmounting). 我已通过iframe包含了该文件，并希望保持网站加载状态，直到图像源更改为特定的源（绿色条表示已完成卸载）。 The reason why I want to keep it loading is because im calling it via a jquery.get function from another site, and i want it to wait till the unmounting process is done. 我之所以要保持它的加载状态，是因为我是通过另一个网站上的jquery.get函数调用它的，而我希望它等待卸载过程完成。 Would be great if this is possible only in plain javascript, but if needed I can also include jquery. 如果这仅在纯javascript中可行，那将是很好，但是如果需要，我还可以包括jquery。 Here is what I got so far: 这是到目前为止我得到的：

<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>

I am immediately receiving an error that the element "uiView_TestPic" does not exist, even when I add a timeout before running check. 我立即收到一个错误消息，即使我在运行检查之前添加了超时，元素“ uiView_TestPic”也不存在。

The included iFrame site stops loading as soon as all images are loading and not when the whole process is done. 包含的iFrame网站会在所有图像加载完毕后立即停止加载，而不是在整个过程完成后立即停止加载。

Answer 1

First off, both frames must be running on the same domain because browsers will prevent code in one frame from accessing anything in the other frame if they are different domains. 首先，两个框架都必须在同一域上运行，因为浏览器将阻止一个框架中的代码访问其他框架中的任何内容（如果它们是不同的域）。 If the two frames are not on the same domain, then the iframe will have to monitor itself and notify the other frame when it has finished using something like window.postMessage() . 如果两个框架不在同一域中，则iframe将必须对其进行监视，并在完成使用window.postMessage()类的操作时通知另一个框架。

If they are on the same domain, this is slightly complicated. 如果它们在同一个域中，这会有些复杂。 You have to get the iframe element (that's in your main document). 您必须获取iframe元素（位于主文档中）。 You have to wait for that to be ready (since it has to load it's own contents). 您必须等待它准备就绪（因为它必须加载自己的内容）。 Then, you have to get the document in the iframe. 然后，您必须在iframe中获取文档。 Then you can find the desired image in the iframe. 然后，您可以在iframe中找到所需的图像。 Then you can observe it's contents. 然后，您可以观察它的内容。 And, of course, you can only do any of this if the iframe is the same domain as your main page (because of security restrictions). 而且，当然，只有在iframe与您的主页位于同一域中时，您才能执行上述任何操作（由于安全限制）。

First, add an id to the iframe: 首先，将ID添加到iframe：

<iframe id="myFrame" seamless width="100%" frameborder="0" height="80%" src="http://fritz.box/usb/usb_diskcut.lua?usbdev=all"></iframe>

Then, you can use this: 然后，您可以使用以下命令：

    // 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);
    });

FYI, there's more detail on waiting for an iframe to be ready here: How can I access the DOM elements within an iFrame 仅供参考，这里有更多有关等待iframe准备就绪的详细信息：如何访问iFrame中的DOM元素

If you control the code in the iframe, then a much cleaner way to implement this would be to use window.postMessage() to post a message to the parent window when the code in the iframe finishes its operation. 如果您在iframe中控制代码，则实现此目标的一种更简洁的方法是在iframe中的代码完成其操作后，使用window.postMessage()将消息发布到父窗口。 Then the parent window can just listen for that single message and it will know when the operation is done. 然后，父窗口可以只侦听该单个消息，并且它将知道何时完成该操作。

That could look something like this. 看起来可能像这样。 Put this code in the 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);

Then, in your main window, you would listen for the posted message like this: 然后，在您的主窗口中，您将收听以下发布的消息：

    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
        }
    });

Answer 2

You can check whether the element is there in the dom or not and then have the check for the src. 您可以检查dom中是否存在该元素，然后检查src。 Something like this should work: 这样的事情应该起作用：

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());

In this Fiddle you will see that src null error is not happening. 在此小提琴中，您将看到src null错误没有发生。 However if you remove document.getElementById("uiView_TestPic") && you get your error 但是，如果删除document.getElementById（“ uiView_TestPic”）&&，则会出现错误

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

问题描述

2 个解决方案

解决方案1
1 已采纳 2014-08-04 16:36:21

解决方案2
0 2014-08-04 08:37:25

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-08-04 16:36:21

解决方案2 0 2014-08-04 08:37:25

解决方案1
1 已采纳 2014-08-04 16:36:21

解决方案2
0 2014-08-04 08:37:25