CODEWITHSUNDEEP
javascriptjqueryhtmlperformanceiframe
zayd moorad
zayd moorad

Reputation: 1

open each iframe with individual buttons for each

I'm trying setup multiple iframes that can be called onclick of a button.

for eg. Button1 goes to iframe1 Button2 goes to iframe2 etc.

I have 10 iframes which are slowing my website down, I need to stop them from loading and only load on click of a button.

hope there's enough information here. 

//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>

what I have at the moment. http://jsfiddle.net/tdLnoxmo/147/

Upvotes: 0

Views: 65

Answers (3)

Zubair M
Zubair M

Reputation: 1

In wordpress you need to replace '$' by '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"));  
};

Here are the changes to make in 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 Fiddle: http://jsfiddle.net/tdLnoxmo/160/

Upvotes: 0

enno.void
enno.void

Reputation: 6579

My solution:

<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/

Upvotes: 0

Mohammad Hamedani
Mohammad Hamedani

Reputation: 3354

‍id property is unique, so you can use class or use next() jquery selector:

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

Upvotes: 1

Related Questions