How To Change An Iframes Src On Click

[Stuart Bennett]

Hi There

I previously posted a question at https://css-tricks.com/forums/topic/how-to-dynamically-hide-or-reveal-tables-rows-as-needed/ as it is not yielding any useful answers i am thinking of trying a different approach.

I have 13 subjects and have standalone topic specific webforms for 11 of those 13 subjects and can easily create standalone forms for the final 2 subjects.

So if I was to create a appropriately labeled button for each of the 13 subjects and place them in my contact us page and then on the contact us page place an iframe on the page how can i set the iframe to load the html page containing the desired form based on the button they click.

So if they click Website Design Enquiry Button it changes the src value of the iframe on the contact us page to http://www.admiralsystems.co.uk/Website Design Form.html and so on.

i know that this will make the page look somewhat unprofessional even with the best graphics in the world you can’t make such a setup look good but right now i have no other choice.

so any help will be greatly appreciated.

[dyr]

Here’s a simple example: http://codepen.io/shawkdsn/pen/HCfxi

Instead of buttons I opted for a select. If you need to use buttons then your javascript will differ slightly.

There’s one <select> element and (in this simplified example) two <option> elements. Each option elements’ value is the URL you want to load into the <iframe>. (you could instead store the list of URLs in an array within your javascript, but the way I’ve implemented it would let you build your HTML dynamically and not have to independently set up an array with your URLs.

The function switchIframeSrc simply sets the src attribute of the iframe to the selected option’s value (the URL.)

I read through your other thread and I believe there’s a better solution to your problem, but I would need more information to determine exactly what that is. Forms can be tricky.

[Stuart Bennett]

Hi dyr

okay that certainly sounds like a good possibility

regarding my other thread what additional information do you need to assist me with that approach?

i am also looking at making my boss pay $10 a month subscription to wufoo in order to resolve this issue which i know he will not be too happy about but if i can’t figure out the coding side of things then i may well have to insist on it.

so any help you can provide would be greatly appreciated.

[Stuart Bennett]

i btried to implement your code but it didnt work the dropdown is there but it doesnt change the page

i have no idea why this wouldnt work

here is the link to my codepen for this project

http://codepen.io/stuartbennett/pen/gmxvL

it should work but doesn’t any ideas why it isn’t working?

[benjaminmisell]

Here you go

Check that the websites dont have x-frame-options is not set to “sameorigin” or “deny” otherwise it wont work

[Stuart Bennett]

hi there

where is this x frame thingy then as i tested my html in codepen with your js and it worked but when i do it on my website it will not function.

[benjaminmisell]

It’s in the headers and it might be that you’r hosting provider does not allow iframes.

[Stuart Bennett]

hi there

none of the code on any of my sites pages mention x frame in any way shape or form.

the page to be displayed in the iframe is on the same site as the contact us page itself even in the same folder i have total access to the domain.

i am hosting with heart internet but they do support iframes as if you go to http://www.admiralsystems.co.uk which is the site i am having this issue on note the social icons at the top of each page they are on a page called social media.html in the root of the site and displayed in the top of every page using an iframe and that iframe gives me no trouble

yet the technique your using with javascript and an iframe doesn’t appear to work so i have no idea what is going on.

[dyr]

https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options

Read more at MDN about Iframe Same-Origin policies. This is a server configuration.

Notice in my example the URLs I’ve linked in the <select> are CodePEN URLs which of course have no problem being shown in an Iframe on CodePEN. Could you try something like what I showed but on your site? As long as the page the Iframe is on and the URL you load into it are on the same domain you won’t have that problem.

[Author]

Posts