jQuery Tabs / IFrames一次执行所有问题

时间:2018-02-01 18:47:51

标签: jquery asp.net iframe

我设置了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 个答案:

答案 0 :(得分:0)

如果你真的想使用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>