javascript - iframe 和过渡效果相乘？

Question

您好，我有以下用于 iframe 之间的过渡效果的脚本。我不是 iframe 的粉丝，但对于我的应用程序，我发现它是最好的解决方案，因为在 iframe 中我可以执行表单、javascript 事件和触发器加载(我认为如果我对页面并将内容放在 div 中，至少我尝试过但没有成功)。

无论如何，我一直在绕过这段工作代码，试图让它变得更好，我的意思是通过尝试使用一些父脚本和 css 来加快 iframe 页面的加载速度，而不必每次都在 iframe 中调用它们(如果你也有解决方案，那就太好了)

这里是javascript代码:

<script type="text/javascript">
    var MyUrl = "";
    function transition(url) {
        MyUrl = url;
        window.$('#Frame').attr('src', MyUrl);
        window.$('#darkBack').slideDown('fast', function () {
            window.$('#Frame').fadeOut('fast', function () {                                
                window.$('#Frame').load(function () {
                    window.$('#Frame').fadeIn('fast', function () {
                        window.$('#darkBack').slideUp('fast', function () {                                            
                           alert('1');
                           //window.$("#Frame").contents().find("#contenido").find("form").find('input:text:enabled:first').focus();
                        });
                    });
                });
            });
        });
    }
</script>

在 parent 身上我有这样的东西:

<div id="darkBack" style="display: none;">
    <table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%">
        <tr>
            <td align="center" valign="middle" height="100%" width="100%">                    
                <div id="processing">
                    process
                </div>
            </td>
        </tr>
    </table>
</div>
<iframe id="Frame" src="" scrolling="yes"></iframe>

正如我所说，这段代码有效，每次更改页面时，我都会调用函数 parent.transition("some url"); 但是修改这段代码并添加“警报” "我可以看到，每次我调用转换函数时，警报显示的次数与点击“历史记录”中调用该函数的次数一样多。

我设法重现问题上的 jsfiddle 页面:

https://jsfiddle.net/zsjc5spg/

现在，我不是 javascript super 专家，但我很确定在我的应用程序中，大约五分钟后这个函数至少被调用 20 次，并且在应用程序中工作/导航几个小时后，这个脚本是调用了几百次或更多次。(我已经尝试过 FF 和 chrome，同样的问题)所以这一定会在一段时间后减慢用户体验，无论如何这种无用的重复它不会帮助我做一些我需要的其他事情。

拜托，我需要一些帮助，也许改进代码，也许以其他方式进行。

谢谢

问题是，我需要清理/更改代码以停止函数的多次“运行”，如多次出现警报所示。

Answer 1

尝试使用 data-* 属性存储 url ， .click() 附加到 a 元素，设置 src 在.fadeOut() 完成回调，.ready()

html

<div id="darkBack" style="display: none;">
    <table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%">
        <tr>
            <td align="center" valign="middle" height="100%" width="100%">
                <div id="processing">processing</div>
            </td>
        </tr>
    </table>
</div>
<iframe id="xaaxFrame" src="" scrolling="yes"></iframe> <a href="#" data-url="https://jsfiddle.net">jsfiddle</a>  <a href="#" data-url="https://example.com">example.com</a>

js

window.transition = function (url) {
    $("#darkBack").slideDown("fast", function () {
        $('#xaaxFrame').fadeOut("fast", function () {
            $(this).attr('src', url)
            .ready(function () {
                $('#darkBack').slideUp('fast', function () {
                    $('#xaaxFrame').fadeIn('fast', function () {
                        alert('1');
                    });
                })
            })
        })
    });

};

$("a").click(function (e) {
    e.preventDefault();
    var url = $(this).data("url");
    window.transition(url)
});

jsfiddle https://jsfiddle.net/zsjc5spg/2/