Как я могу настроить сгенерированную js высоту iframe в зависимости от содержимого?

Question

Я пытаюсь настроить высоту фрейма в соответствии с его содержимым. Iframe будет динамически добавляться с помощью JavaScript, что означает, что JavaScript также должен иметь дело со свойствами элемента:

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

Кто-нибудь случайно знает, что я мог сделать, чтобы сделать эту работу? Я нашел следующее решение и применил его к коду, доступному выше:

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

Источник

Функция JavaScript может (хотя в в этом примере она не будет работать) для простого HTML-кода, сгенерированного <iframe>, когда речь идет о сгенерированном JavaScript <iframe>, похоже, она не работает. Я делаю что-то не так или я должен использовать какой-либо альтернативный метод?

Редактировать: Я использую ASP.Net MVC, мой проект содержит следующий код в представлении:

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>

Когда кнопка нажата, она должна вставить / добавить элемент iframe в .modal-content часть 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();
    });
});

Это, кажется, добавляет <iframe>, но не регулирует высоту. Кто-нибудь знает, как я могу решить эту проблему? Все это происходит в том же домене, что и я, ссылаясь на «домашний» контроллер, который можно найти в моем проекте и который назначен моему <iframe> атрибуту источника (см. Код выше).