Question

一旦我点击了li（Google＆amp; Bing）的两个项目，我就创建了iframe，我可以进行搜索。

现在，当我再次点击li以检查iframe是否已经存在时，我该怎么办？所以我不重新加载搜索？那有意义吗？

<HTML> 
    <HEAD> 
    <TITLE></TITLE> 
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js "></script>
            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js "></script>
    <style type="text/css">
    iframe {width: 100%;height: 100%;max-width: 850px;min-height: 890px;overflow-x: hidden;overflow-y: auto;}
    </style>
    </HEAD> 

    <body> 
                <div id="search_engines" class="tabs">  

     <ul>
                  <li><a href="#google" onclick="googleLoad();">Google</a></li>
                  <li><a href="#bing" onclick="bingLoad();">Bing</a></li>

          </ul>


        <div id="google">

            <a href="javascript: void(0)" onclick="googleLoad();" style="text-decoration: none" class="">New search</a>
            <script type="text/javascript">
            function googleLoad() {
            $("#googleIframe").html('<iframe id="googleLoad" frameborder="0" src="http:www.google.com"></iframe>'); 

            }
            </script>
            <div id="googleIframe"> 
            <!--Iframe goes here -->
            </div>
        </div>  

            <div id="bing">

            <a href="javascript: void(0)" onclick="bingLoad();" style="text-decoration: none" class="">New search</a>
            <script type="text/javascript">
            function bingLoad() {
            $("#bingIframe").html('<iframe id="bingLoad" frameborder="0" src="http:www.bing.com"></iframe>'); 

            }
            </script>
            <div id="bingIframe">   
            <!--Iframe goes here -->
            </div>
        </div>  

    </div>

    </body> 

    </HTML>

Answer 1

只需将此检查添加到您的代码中：

function googleLoad() {
    if(!$('#googleLoad').length) {
        $("#googleIframe").html('<iframe id="googleLoad" frameborder="0" src="http:www.google.com"></iframe>'); 
    }
}

function bingLoad() {
    if (!$('#bingLoad').length) {
        $("#bingIframe").html('<iframe id="bingLoad" frameborder="0" src="http:www.bing.com"></iframe>'); 
    }
}

Answer 2

最简洁和语义的方法是通过jQuery .one()函数（而不是内联onclick=声明）附加click事件。这样，您的函数在单击后执行，后续单击不会再次触发加载过程。

<a id="myGoogleLink">Google</a>

然后用

绑定它

$('#myGoogleLink').one('click', function(){
    $('#googleIFrame').html("BLAH");
});

现在，如果你在Google和Bing IFRAME之间进行切换，那就完全不同了。

Answer 3

这将做你想要的：

if($('#googleLoad').length > 0) {
  // iframe with id googleLoad exists
}

如果iframe不存在，则jquery加载

3 个答案: