CODEWITHSUNDEEP
javascriptfunctioniframe
Ryan H
Ryan H

Reputation: 2973

Detect height of external source iFrame content from website JS

I've inherited some JS which detects an iFrame's content height from another website within a website. iFrames aren't great for manipulating content within an iFrame from a website, it's not really possible.

The iFrame contents in my example works perfectly fine, it's a really long single page form that is being loaded as the iFrame source from another website (I cannot provide the iFrame source, but what I can say is the source isn't on the same domain as the actual website loading the iFrame).

I'm trying to figure out really two things:

  1. How is this able to read the iFrame source and get the height.

and... 2. How reliable is this code across older browsers and is there an alternative approach?

The below code is functional right now, it somehow manages to detect the contents of the iFrame source regardless of it's source and outputs an integer number which I then convert to pixels to then set the height of the iFrame via my website.

HTML

<div class="banner-page">
    <iframe id="iframe" class="position-relative" src="https://externalwebsite.com/application-form" width="100%" frameborder="0" scrolling="no"></iframe>
  </div>

JS (which gets the height of the application form from the source)

// Create IE + others compatible event handler
    var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent"
    var eventer = window[eventMethod]
    var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message"

    // Listen to message from child window
    eventer(messageEvent,function(e) {
        var str = e.data.toString()
      var pageHeight = e.data
      document.getElementById("iframe").style.height = pageHeight + 'px';
    }, false)

The above code works, I'm looking to gain a collaborative opinion on how reliable this is in older browsers and how else I could modify this,

furthermore, I'm wondering is there a way I could provide a fallback solution to just a generic number of pixels if the code doesn't work.

Many thanks :)

Upvotes: 0

Views: 307

Answers (1)

Quentin
Quentin

Reputation: 944445

How is this able to read the iFrame source and get the height.

It isn't. Reading the height of the content of a frame on a different origin is forbidden by the same origin policy.

JavaScript in the framed page is responsible for determining the height of the page. It then uses postMessage to send that information to the listener in the parent page.

How reliable is this code across older browsers

Can I Use lists browser support for the relevant features.

and is there an alternative approach?

Guesswork.

I'm wondering is there a way I could provide a fallback solution to just a generic number of pixels if the code doesn't work.

Just set a default in your stylesheet.

If the message listener doesn't fire, the JavaScript to update the height will never run, so it won't override the default.

If it runs, then the default is overridden.

Upvotes: 1

Related Questions