3

I have a site with an iFrame.

The host page has some very basic JS on it, the iframed page has simple JS too.

When I embed the iframe as usualy: <iframe src="iframeURL" width="900" height="1000"></iframe> it works fine in all browsers but IE8.

I tried various things:

  • first: disabling all JS
  • removing src attribute and adding it with JS
  • using <object> instead
  • I used proxy.php to make the content appear as if it were coming from the same domain

It doesn't work in IE8 regardless what I do.

The funny thing is that I can open the page I want to iframe in a separate tab and works just fine.

If I change the src attribute to "some_other_random_page_from_internet" it works.

The other thing is that both host and iframe use postMessage to communicate and I can see the communication is working OK, it's just the content which doesn't show, but when I inspect the page source with developers tools I can see the content is there.

Is it possible that the content of the iframe causes issues? It's a basic HTML + basic JS, with JS disabled it shouldn't be an issue.

Any ideas what else I could check?

PS. I can't show the code (NDA , etc)

strah
  • 6,702
  • 4
  • 33
  • 45
  • Can you see iFrame in other website ? http://www.w3schools.com/html/html_iframe.asp Try a W3C validator, another PC, another docType, to stop all software like skype, your firewall/antivirus/malware… – benoît Jun 25 '12 at 14:33
  • That's very good point. The iframed page doesn't validate (invalid doctype). As I can't change it at the moment (someone else is managing that content) I have to wait to see if it will solve the issue. – strah Jun 25 '12 at 14:52
  • It didn't solve the issue. I can see other websites in the iframe, but not that particular one. Tried different PC... – strah Jun 25 '12 at 15:02
  • I put the [full steps to reproduce the issue in this answer](http://stackoverflow.com/a/23817415/1366033) – KyleMit May 22 '14 at 21:34

2 Answers2

10

Found it.

The iframed content had the following css rule:

html{ position: relative; }

Removing it helped a lot.

strah
  • 6,702
  • 4
  • 33
  • 45
  • 4
    When one is not able to modify the iframe's inside: You can also set `position:relative` on the iframe tag – Lukx Jan 07 '14 at 13:28
4

For visibility of Lukx's comment, the real answer is to set position:relative on the iframe itself, since you might not have the ability to edit the html source page or it might need to use relative positioning.

Just add this CSS and you should be all set:

iframe {
    position: relative;
}

I wrote up a full description of the problem in this answer

Community
  • 1
  • 1
KyleMit
  • 30,350
  • 66
  • 462
  • 664