Change iframes using jQuery

Question

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!

function change(button){iframe.src=button.innerHTML+".html";}and <button onclick="change(this)">one</button> — Ritesh Khandekar
– Ritesh Khandekar, Commented Dec 11, 2019 at 6:07

Nortix Agency · Accepted Answer · 2019-12-11 06:10:23Z

1

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

answered Dec 11, 2019 at 6:10

Nortix Agency

2111 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eugene Zolotuhin Over a year ago

Omg, it somehow works!)) Great thanks!)) p.s. I need to learn it

score 1 · Accepted Answer · 2019-12-11 05:30:01Z

1

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>

edited Dec 11, 2019 at 5:30

answered Dec 11, 2019 at 1:03

user12359228

6 Comments

Eugene Zolotuhin Over a year ago

Could you, please, make a code? It's seems to be a lot of issues if I'd make it. ;)

user12359228 Over a year ago

The code above should work. Replace /page1.html and /page2.html with the pages you want to load in the <iframe>. Also, ensure there is only 1 <iframe> element in the index.html file to ensure the element.querySelector() works.

user12359228 Over a year ago

Here is a GitHub gist with an example project. gist.github.com/devision1088/fc8cc1c92eba3ff9b195c8a04c5c5830

Eugene Zolotuhin Over a year ago

dear devision1088, I've commented your git. Look, please ;)

Eugene Zolotuhin Over a year ago

because it doesn't change src

|

Collectives™ on Stack Overflow

Change iframes using jQuery

2 Answers 2

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related