jQuery 选项卡/IFrame 一次执行的问题

Posted 2023-05-09

【中文标题】jQuery 选项卡/IFrame 一次执行的问题

【英文标题】：Issue with jQuery Tabs/IFrames Executing All at Once

【发布时间】：2018-07-12 04:38:21

【问题描述】：

我设置了 8 个选项卡和 8 个 IFrame（每个选项卡 1 个），但它们似乎都在我的主页加载时同时执行。这是一个问题，因为每个页面都有自己的 onload 函数要运行，这会在等待这些页面完成时挂起我的主页。

我想让 IFrame 仅在我单击它的特定选项卡时运行。我将如何做到这一点？

<script>
    $(function () 
        $("#tabs").tabs(
            active: 0,
            beforeLoad: function (event, ui) 
                if (ui.tab.data("loaded")) 
                    event.preventDefault();
                    return;
                

                ui.jqXHR.success(function () 
                    ui.tab.data("loaded", true);
                );
            
        );
        $('#tabs').css('border', '');
    );
</script>

<div id="tabs">
    <ul>
        <li><a href="#Embed1">Home</a></li>
        <li><a href="#Embed2">Page 1</a></li>
        <li><a href="#Embed3">Page 2</a></li>
        <li><a href="#Embed4">Page 3</a></li>
        <li><a href="#Embed5">Page 4</a></li>
        <li><a href="#Embed6">Page 5</a></li>
        <li><a href="#Embed7">Page 6</a></li>
        <li><a href="#Embed8">Page 7</a></li>
    </ul>
    <iframe id="Embed1" seamless="seamless" src="home.aspx" sandbox=""></iframe>
    <iframe id="Embed2" seamless="seamless" src="page1.aspx" sandbox=""></iframe>
    <iframe id="Embed3" seamless="seamless" src="page2.aspx" sandbox=""></iframe>
    <iframe id="Embed4" seamless="seamless" src="page3.aspx" sandbox=""></iframe>
    <iframe id="Embed5" seamless="seamless" src="page4.aspx" sandbox=""></iframe>
    <iframe id="Embed6" seamless="seamless" src="page5.aspx" sandbox=""></iframe>
    <iframe id="Embed7" seamless="seamless" src="page6.aspx" sandbox=""></iframe>
    <iframe id="Embed8" seamless="seamless" src="page7.aspx" sandbox=""></iframe>
</div>

【参考方案1】：

如果您真的想使用 Iframe（而您不想）。您必须以编程方式设置src。 将src= 属性留空并使用jQuery 加载它。

<button type="button" id="Button1">Load Iframe</button>

<iframe id="Embed1"></iframe>

<script type="text/javascript">
    $(document).ready(function () 
        $('#Button1').click(function () 
            $("#Embed1").attr("src", "Page2.aspx")
        )
    );
</script>

【讨论】：

嗨 vdwwd，谢谢，我原本不想使用 iframe，但是当我直接使用标签时，href 页面上的 jscript 代码不会执行。