Question

我有iframe的parent.html。 iframe的来源是child1.html，它链接到child2.html，链接回child1.html

parent.html

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    </head>
    <body>
        <p>This is the parent</p>
        <iframe id="frame1" src="child1.html"></iframe>
        <script type="text/javascript">
            var frame1ChildWindow = document.getElementById("frame1").contentWindow;
            $( frame1ChildWindow ).unload(function() {
                console.log('unload triggered');
            });
            $('#frame1').load( function() {         
                console.log('load triggered');
            });
        </script>
    </body>
</html>

child1.html

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <p>This is child page 1</p>
        <p><a href="child2.html">Go to child page 2</a></p>
    </body>
</html>

child2.html

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <p>This is child page 2</p>
        <p><a href="child1.html">Go to child page 1</a></p>
    </body>
</html>

我希望每次在child1.html和child2.html之间导航时都会触发.unload（）和.load（），但目前每次只触发.load（）。 .unload（）仅在child1.html页面上触发，并且不会再次为所有后续导航触发。

有人可以

解释为什么.unload（）仅在child1.html页面上触发
展示如何在每次导航时触发.unload（） child1.html和child2.html

Answer 1

.unload（）似乎只在child1.html页面上触发，因为当你导航到child2.html时，变量frame1ChildWindow不再存在，因为它是child1.html的contentWindow。

要使.unload（）触发每个页面，我将绑定放在.load（）函数中，以便它绑定到在iframe中加载的每个子contentWindow。

$('#frame1').load( function() {         
    console.log('load triggered');
    var frame1ChildWindow = document.getElementById("frame1").contentWindow;
    $( frame1ChildWindow ).unload(function() {
        console.log('unload triggered');
    });
});

这应该允许我显示从iframe导航到的任何页面的加载div / gif。

Answer 2

通过阅读.unload()文档，它说明了解除unload事件以让javascripts执行清理代码，但它无法阻止（或取消）浏览器用户正在执行的默认操作，这可能是导航到另一个链接（在您的情况下，child2.html）。

因此，每次创建新窗口时，都必须更新卸载触发器，即加载窗口时。

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    </head>
    <body>
        <p>This is the parent</p>
        <iframe id="frame1" src="child1.html"></iframe>
        <script type="text/javascript">

            $(document).ready(function() {

              // function for setting an unload callback function
              function setChildUnload(callback)
              {
                var documentChild = $('#frame1').prop("contentWindow").document;
                var childWindow = $('#frame1').prop("contentWindow");

                // we need to wait for child's ready function
                $(documentChild).ready(function() {
                  $(childWindow).unload(callback);
                });
              }

              // unload callback
              function myUnload()
              {
                  console.log('unload triggered');
              }

              $('#frame1').load( function() {         
                  console.log('load triggered');

                 // set the callback when child page is loaded
                setChildUnload(myUnload);
              });
            });
        </script>
    </body>
</html>

基本上，每次离开页面时，window对象都会与您的unload处理程序一起被销毁。我在加载新页面及其窗口时再次设置它。

加载函数似乎不会以这种方式工作，因为您可以附加到iframe对象，该对象不会在页面导航中被销毁。

jquery .unload（）仅触发在iframe中访问的第一页

2 个答案: