2

I am trying to adjust the height of an iframe to its content. The iframe will be added dynamically by JavaScript, meaning JavaScript has to deal with the element's properties as well:

let iframe = document.createElement("iframe");
iframe.src = "https://en.wikipedia.org/";

document.getElementById("foo").appendChild(iframe);

iframe.onload = function() {
  iframe.style.height = "600px";//<-- Does work, why?
  resizeIframe(iframe);//<-- Does not work
  //iframe.style.height = iframe.contentWindow.document.body.scrollHeight + "px"; //<-- Does not work (when uncommented)
}

function resizeIframe(obj) {
  obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
<div id="foo">
  <!-- Iframe to be inserted in here -->
</div>

JSFiddle

Does anyone happen to know what I could do to make this work? I found the following solution and applied it to the code available above:

function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}

Source

The JavaScript function might (although in this example it would not) work for a plain HTML generated <iframe>, when it comes to a JavaScript generated <iframe>, it does not seem to work. Am I doing something wrong or should I use any alternative method?

Edit: I am using ASP.Net MVC, my project contains the following code in the view:

MyView.cshtml:

<div class="my-class text-center">
    <span>
        For testing purpose only, this elements has been added. Functionality:
    </span>
    <br />
    <button id="loadiframe" class="btn btn-lg btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">
        Load iframe
    </button>
</div>

When the button is clicked, it should insert/add an iframe element to the .modal-content part of a Bootstrap Modal:

myscript.js:

function foobar() {
    let iframe = document.createElement("iframe");
    iframe.src = "/home";
    $(".modal .modal-content").html(iframe);
    iframe.onload = function () {
        iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
    }
}

$(document).ready(function() {
    $("button#loadiframe").on("click", function () {
        foobar();
    });
});

This does seem to add the <iframe>, but not adjust the height. Would anyone happen to know how I could fix this problem? This would be all happening on the same domain as I am referring to the "home" controller which can be found within my project and which is assigned to my <iframe> source attribute (see code above).

Barrosy
  • 1,407
  • 2
  • 25
  • 56
  • 1
    Hi, when you launch your console in your jsfiddle, you can see that you have a cross origin problem. You should take a look at this : https://stackoverflow.com/questions/2620755/iframe-accessing-parent-dom – abvlle Mar 22 '19 at 13:29
  • I am using the same script within my project (which is supposedly on the same domain). Console is not showing any errors and the ` – Barrosy Mar 22 '19 at 13:36
  • Very weird, I tried with your sample of code in local and it's working for me. Which browser do you use ? have you tried other browsers ? If you try to `console.log` `iframe.contentWindow.document.body.scrollHeight`, what's the result ? – abvlle Mar 22 '19 at 15:16
  • It will return 0 if I place it at the top of the `iframe.onload` function. Tried it in both Firefox and Chrome @abvlle . – Barrosy Mar 22 '19 at 15:25
  • The cause to my problem on my local environment was the fact that I was trying to use JavaScript's `appendChild` and when trying to set the height of the iframe, it could not grab the correct height of the content because the iframe the javascript was trying to get, had no content because of the `appendChild` function. I could have solved the problem by cloning, but instead I tried to only use appendChild on a single element rather than on a collection of elements (which was happening in my case). @abvlle the information you supplied helped me figure this out. – Barrosy Mar 27 '19 at 11:21

0 Answers0