jquery load if iframe doesn't exist
Once i have clicked once on both items of the li(Google & Bing) i have created the iframes and i can do a search.
Now how would i do when i click again on the li to check if the iframe is already there so i don't reload the search? Does that make sense?
<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/jqu开发者_高级运维eryui/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>
The cleanest and semantic way to go about it is to attach the click event via the jQuery .one() function (instead of an inline onclick= declaration). That way, your function executes after the click, and subsequent clicks won't trigger the load procedure again.
<a id="myGoogleLink">Google</a>
then bind that with
$('#myGoogleLink').one('click', function(){
$('#googleIFrame').html("BLAH");
});
Now, if you were toggling between the Google and the Bing IFRAMEs, that's a whole different situation altogether.
Just add this check to your code:
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>');
}
}
This will do what you want:
if($('#googleLoad').length > 0) {
// iframe with id googleLoad exists
}
加载中,请稍侯......
精彩评论