[Solved] How to get Javascript/Jquery to work in Iframes

[Danny9]

Hello, I have to use Iframes for one section of a website.

The html/css bits are there working in the Iframe perfectly fine but the javascript (in this case a simple mouse over/hover effect) just doesn’t work. And in another iframe a jquery effect doesn’t work either. When the html code is not in a seperate Iframe page (when placed within the main code and not in a separate .html file) the javascript works fine.

So: javascript works fine on the things outside of iframe (nothing wrong with the javascript), html/css works fine if in and outside iframe but javascript has no effect on things within the iframe

Any help appreciated.

[TheDoc]

Is the iframe being pulled from a different domain?

[Danny9]

No it’s not – at the moment it’s just in a folder on my hard drive so it goes something like this:

index.html
css.css
images_folder
iframes_folder

when uploaded the iframes folder will be on same server as all the other bits and bobs that make up the website (pages, images, javascript etc)

[TheDoc]

I know this isn’t the answer to your question, but if the files are on the same server, why are you using an iframe? Surely removing the use of the iframe will resolve this problem.

[Danny9]

It’s to do with providing specific content to certain viewers – not my choice.

Anyway, I’ve just done a quick test: a totally blank html page with an iframe tag getting one of the iframe pages and it is displaying it fine: javascript in that iframe page is working fine so something is stopping the javascript working on my proper, full index page.

[TheDoc]

Sounds like a JS conflict to me. Remove them all, then start adding them back one by one to find the problem file.

[Danny9]

Not sure what it was Doc, working fine now though, thanks.

[Author]

Posts