Я пытаюсь сделать что-то, что не должно быть очень трудным, но удивительно, что я не смог найти решение в Интернете.
Я хочу встроить фреймы в любой случайный сайт, безпосетители замечают, что это на самом деле другой кадр.Я хочу, чтобы iframe сливался с родительским телом, расширяя тело родителя, чтобы можно было прокручивать не-iframe-часть и iframe-часть веб-сайта только с помощью главной полосы прокрутки родительской страницы.
Это мой код:
<h1>Tours</h1>
<div style="background-color: red; color: white; padding: 200px; text-align: center;">
Top part of page
</div>
<iframe id="tourtask-iframe" style="overflow: hidden;" src="/public/index.php?b=eit&token=abcd1234&p=tours&lang=en">Please upgrade to a browser that supports iframes.</iframe>
<style>
body, html {
width: 100%;
height: 100%;
margin: 0;
}
#tourtask-iframe {
width: 100%;
height: 2000px;
border: none;
}
</style>
Когда я делаю overflow: hidden; в теле исходного файла архива iframe, полоса прокрутки исчезает, но я не могупрокрутите часть страницы iframe.
Мне нужно обновить высоту элемента iframe, чтобы заполнить 100% высоты этого файла.Мне также необходимо обновлять высоту элемента iframe всякий раз, когда я раскрываю / сворачиваю любое свернутое содержимое во фрейме.
Как это можно сделать?Или есть лучший способ?
Я бы предпочел не использовать какую-либо библиотеку / фреймворк для родительской страницы, поскольку мне нужно будет иметь возможность встраивать этот iframe в совершенно разные веб-страницы.
Спасибо!