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

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

javascript jquery html iframe

Javascript jquery.unload（）仅触发在iframe中访问的第一页,javascript,jquery,html,iframe,Javascript,Jquery,Html,Iframe,我有带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&

我有带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>

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

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


这是家长
var frame1ChildWindow=document.getElementById（“frame1”）.contentWindow；
$（frame1ChildWindow）.unload（函数（）{
log（“卸载触发”）；
});
$（'#frame1'）.load（function（）{
log（“加载已触发”）；
});

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

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

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


这是第1页

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">
            var frame1ChildWindow = document.getElementById("frame1").contentWindow;
            $( frame1ChildWindow ).unload(function() {
                console.log('unload triggered');
            });
            $('#frame1').load( function() {         
                console.log('load triggered');
            });
        </script>
    </body>
</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>

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


这是第2页

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

能找个人吗

解释为什么.unload（）仅在child1.html页面上触发

演示如何在每次导航时触发.unload（） child1.html和child2.html

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

通过阅读

.unload（）

文档，它声明将触发unload事件以允许javascripts执行清理代码，但它不能阻止（或取消）浏览器执行用户正在执行的默认操作，可以导航到另一个链接（在您的例子中是child2.html）

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

因此，我必须在每次创建新窗口时（即加载窗口时）更新卸载触发器

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


这是家长
$（文档）.ready（函数（）{
//用于设置卸载回调函数的函数
函数setChildUnload（回调）
{
var documentChild=$（'#frame1'）.prop（“contentWindow”）.document；
var childWindow=$（'#frame1'）.prop（“contentWindow”）；
//我们需要等待child的就绪功能
$（documentChild）.ready（函数（）{
$（childWindow）.卸载（回调）；
});
}
//卸载回调
函数myUnload（）
{
log（“卸载触发”）；
}
$（'#frame1'）.load（function（）{
log（“加载已触发”）；
//在加载子页面时设置回调
setChildUnload（myUnload）；
});
});

基本上，每次离开页面时，

窗口

对象将与

卸载

处理程序一起销毁。在加载新页面及其窗口时，我将再次进行设置

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

加载函数似乎不是这样工作的，因为您可以附加到iframe对象，而iframe对象不会在页面导航中被破坏。

如果将javascript封装到jquery

文档中，是否会发生这种情况。ready

语句？另外，如果您将

$（frame1ChildWindow）.unload（function（）{

更改为

$（frame1ChildWindow）.on（“unload”，function（）{

？@rodrigogq感谢您的建议，尝试了这两种方法，得到了完全相同的结果result@rodrigogq抱歉，我上面的测试有缺陷，结果是。unload（）仅在child1.html上触发，一旦我注意到这一点，我就能够解决。我将更新问题并发布答案。干杯。您是否尝试附加

$（'#frame1'）。卸载（函数（）{

直接？否则，就在主页加载时，您似乎正在该窗口上挂起一个

卸载

函数处理程序。当您跟随链接时，似乎因为此窗口被破坏到下一页的窗口。因此，您要么附加到iframe，要么尝试将其与其他事件一起设置。@rodrigogq yes，第一个事件之一我尝试将.unload（）附加到父级中的iframe，但它不会触发，尽管.load（）是以这种方式附加并触发的。您知道这是为什么吗？请参阅下面的答案，这对我有效，您看到这有什么潜在问题吗？谢谢