CODEWITHSUNDEEP
jqueryhtmliframe
Eugene Zolotuhin
Eugene Zolotuhin

Reputation: 111

Change iframes using jQuery

Hi guys!
I have a line of code:

<iframe id="ChildFrame" class="_page_frame_style" src=""></iframe>

So I have three buttons (id: "one", "two", "three").
And I need to change src of iframe by clicking on respective id.

Idea is:
1. When page is loaded no frame is displayed. (display:none)
2. When click on "one" button - shows one.html.
3. When click on "two" button - shows two.html. And so on...
4. Make a button to return ChildFrame into display:none.

I've been googling for it, but every try failed.
Thanks for each reply!

Upvotes: 1

Views: 148

Answers (2)

Nortix Agency
Nortix Agency

Reputation: 211

here is the answer

$('#ChildFrame').attr('src', src_value)

and the src_value is the source link value that you want to set for your iframe element

and also have a look at this link:

https://www.sitepoint.com/community/t/changing-and-loading-an-iframe-src-attribute-with-jquery/9571/2

Upvotes: 1

user12359228
user12359228

Reputation:

You can modify the HTML <iframe> tag src attribute in JavaScript using element.src. Therefore, you can make a button that calls a function which makes the src of the <iframe> change each time.

Additionally, you can make the iFrame hidden by default and use JavaScript to display it again when the button is pressed.

function changeIFrame(url) {
    document.querySelector("iframe").src = url;
    document.querySelector("iframe").setAttribute("style", "");
}

<button onclick="changeIFrame('/page1.html')">Page 1</button>
<button onclick="changeIFrame('/page2.html')">Page 2</button>

<iframe style="display:none;"></iframe>

Upvotes: 1

Related Questions