Question

我想监视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网站会在加载所有图片后立即停止加载，而不是在整个过程完成时停止加载。

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

Answer 2

你可以检查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;你得到错误

JS保持加载直到img src发生变化

2 个答案: