Question

我尝试设置多个iframe，只需按一下按钮即可调用。

例如。 Button1转到iframe1 Button2转到iframe2等。

我有10个iframe正在减慢我的网站速度，我需要阻止它们加载，只需点击按钮就可以加载。

希望这里有足够的信息。

//java
$("button").click(function(){
    var iframe = $("#myiFrame");
    iframe.attr("src", iframe.data("src")); 
});


//html
<button id="button" onclick="postYourAdd()">Button</button>
<iframe id="myiFrame" data-src="http://ideasroom.co.nz/clothing/polos/" src="about:blank">
</iframe>

<button id="button" onclick="postYourAdd()">Button</button>
<iframe id="myiFrame" data-src="http://ideasroom.co.nz/clothing/polos/" src="about:blank">
</iframe>

我现在拥有的东西。 http://jsfiddle.net/tdLnoxmo/147/

Answer 1

id属性是唯一的，因此您可以使用class或使用next() jquery选择器：

$("button").click(function(){
    var iframe = $(this).next('iframe');
    iframe.attr("src", iframe.data("src")); 
});

Answer 2

我的解决方案：

<button id="button" frameId="myiFrame1">Button</button>

$("button").click(function(){
    var a = $(this).attr('frameId');
    iframe = $('#'+a);
    iframe.attr('src',iframe.attr('data-src'))
});

http://jsfiddle.net/tdLnoxmo/154/

Answer 3

在wordpress中你需要用'jQuery'代替'$'：

jQuery("a").click(function(e){
    var id = jQuery(this).attr("href")
    loadIframe( id );
});

var loadIframe = function( id ){
    var iframe = jQuery( id );
    iframe.attr("src", iframe.data("src"));  
};

以下是HTML中的更改：

<div>
    <a href="#myiFrame2">Iframe 2</a>
    <iframe id="myiFrame2" data-src="http://ideasroom.co.nz/" src="about:blank">
    </iframe>
</div>
<div>
    <a href="#myiFrame1">Iframe 1</a>
    <iframe id="myiFrame1" data-src="http://ideasroom.co.nz/" src="about:blank">
    </iframe>
</div>

JS小提琴：http://jsfiddle.net/tdLnoxmo/160/

打开每个iframe，每个iframe都有各自的按钮

3 个答案: