JQuery : Set iframe height dynamically by content

Question

I´m trying to find working jquery script for setting iframe height equal to content height.

I found this:

$("#IframeId").load(function() {
    $(this).height( $(this).contents().find("html").height() );
});

Fiddle

but is working only for old versions of jquery.

Any ideas for v3.3?

Answer 1

Change your code like this and you will be good to go:

$("#IframeId").on("load",function() {
    $(this).height( $(this).contents().find("html").height() );
});

Notice that, I have used .on("load") instead of .load(). Because:

 .load(), .unload(), and .error() have been removed with jquery 3.x

Therefore, you need to change:

$(window).load(function() {});

to

$(window).on("load", function (e) {});

Here is the working code.

Answer 2

It's because updated version of jQuery uses on API method to attach events.

$("#IframeId").on("load",function() {
    $(this).height( $(this).contents().find("html").height() );
});

Here is the working Fiddle