automati c высота iframe из другого источника - PullRequest
0 голосов
/ 01 августа 2020

Я пытался интегрировать содержимое другой страницы с помощью iframe. Это лучший подход к исходному коду, который я смог найти для этой реализации.

<script> 
function resizeIframe(iframe) { 
   iframe.style.height = iframe.contentWindow.document.documentElement.scrollHeight + 'px'; 
} 
</script>

<iframe src="https://another-backend-domain.com/bnt" frameborder="0" width="100%" onload="resizeIframe(this)"></iframe>

Проблема в том, что функция onload распознается как перекрестное происхождение. Со страницами в одном домене этот метод работает отлично ...

Uncaught DOMException: Blocked a frame with origin "https://original-website.com" from accessing a cross-origin frame.
    at resizeIframe (https://original-website.com/site/:239:42)
    at HTMLIFrameElement.onload (https://original-website.com/site/:241:112)

Я был бы рад, если бы кто-нибудь мог мне помочь с этим, поскольку даже после многих часов исследований я все еще не могу найдите хороший способ исправить это. Высота моего iframe по умолчанию слишком мала, но я не могу вручную определить высоту в пикселях, потому что высота содержимого изменяется ежечасно ...

Ответы [ 2 ]

1 голос
/ 01 августа 2020

Обратите внимание на функцию JavaScript postMessage. Он позволяет отправлять и получать сообщения между окнами iframe и top.

Отправляйте сообщение из iframe с помощью:

window.top.postMessage({type: "myevent", height: x}, *);

Получить сообщение в верхнем окне с:

window.onmessage = function (event) {
    if (event.data.type && event.data.type == "myevent") {
        var iframeHeight = event.data.height;
    }
};

Вы также можете проверить event.origin, чтобы убедиться, что targetOrigin соответствует домену окна для дополнительной безопасности.

0 голосов
/ 01 августа 2020

Я бы попытался исправить с помощью этого простого фрагмента, взятого из этого ответа , даже без необходимости вставлять JavaScript

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com/video" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...