Контекст
Я пытаюсь встроить iframe на другую страницу ( разные домены )
Код для встраивания выглядит так:
<script type="application/javascript" src="[...]/myTopScript.js"></script>
<iframe src="differentDomain/somePage.html" frameborder="0" allowfullscreen width="100%"></iframe>
Я отвечаю за содержание iframe и myTopScript.js
В iframe есть еще один скрипт (назовем его myInnerScript.js)
TL; DR: высота iframe всегда превосходит его высоту содержимого (внутри нет прокрутки)
Всякий раз, когда изменяется высота содержимого моего iframe, я отправляю сообщение в родительское окно (через window.parent.postMessage), чтобы указать новую высоту для myTopScript.js. Затем верхний скрипт перехватит сообщение и обновит мое свойство iframe height до newHeight + 1px.
Таким образом, мой iframe никогда не нуждается в полосе прокрутки и выглядит как любая другая часть веб-сайта хоста.
Выпуск
Я не могу прокрутить родительскую страницу (с колесом мыши), когда мышь находится над фреймом.
- Я попытался установить
overflow:hidden на iframe <body> tag
- Я попытался установить
scrolling="no" (устарело) в iframe, но ничего не происходит
- Я не могу установить
pointer-events:none на <iframe>, потому что мне нужны события мыши внутри iframe (нажмите по крайней мере)
- Я заметил, что когда веб-страница хоста находится в том же домене, у меня нет этой проблемы, но я не могу найти атрибут iframe, который включил бы эту функцию "прокручивания"
У вас есть какие-либо технические характеристики или документ, объясняющий это? А идеи о том, что еще я мог попробовать?
Я думал о пересылке событий колесика мыши через postMessage, но я почти уверен, что это будет ненадежно