У меня есть приложение, которое я хотел бы встроить в CMS нашей компании. Единственный способ сделать это (мне сказали), это загрузить его в <iframe>.
Easy: просто установите height и width на 100%! За исключением того, что это не работает.
Я узнал о настройке frameborder в 0, так что по крайней мере выглядит как часть сайта, но я бы предпочел не иметь уродливой полосы прокрутки внутри страница, на которой она уже есть.
Знаете ли вы какие-нибудь хитрости, чтобы сделать это?
РЕДАКТИРОВАТЬ: Я думаю, мне нужно уточнить мой вопрос несколько:
- компания CMS отображает пух и прочее для всего нашего сайта
- большинство страниц, созданных с помощью CMS
- моего приложения нет, но они позволят мне встроить его в
<iframe>
- У меня нет контроля над
iframe, поэтому любое решение должно работать со ссылочной страницы (согласно атрибуту src тега iframe)
- CMS отображает нижний колонтитул, поэтому установка высоты в 1 миллион пикселей не является хорошей идеей
Могу ли я получить доступ к DOM родительских страниц с указанной страницы? Это может помочь, но я вижу, что некоторые люди не хотят, чтобы это было возможно ...
Эта техника, кажется, работает ( извлечено из нескольких источников, но вдохновлено ссылкой из принятого ответа:
В родительском документе:
<iframe id="MyIFRAME" name="MyIFRAME"
src="http://localhost/child.html"
scrolling="auto" width="100%" frameborder="0">
no iframes supported...
</iframe>
у ребенка:
<!-- ... -->
<body>
<script type="text/javascript">
function resizeIframe() {
var docHeight;
if (typeof document.height != 'undefined') {
docHeight = document.height;
}
else if (document.compatMode && document.compatMode != 'BackCompat') {
docHeight = document.documentElement.scrollHeight;
}
else if (document.body
&& typeof document.body.scrollHeight != 'undefined') {
docHeight = document.body.scrollHeight;
}
// magic number: suppress generation of scrollbars...
docHeight += 20;
parent.document.getElementById('MyIFRAME').style.height = docHeight + "px";
}
parent.document.getElementById('MyIFRAME').onload = resizeIframe;
parent.window.onresize = resizeIframe;
</script>
</body>
Кстати: Это будет работать только в том случае, если родитель и потомок находятся в одном домене из-за ограничений в JavaScript по соображениям безопасности ...