html – – 如何显示引用页面的整个高度?

前端之家收集整理的这篇文章主要介绍了html – – 如何显示引用页面的整个高度?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个应用程序,我想嵌入我们的公司CMS. (我被告知)这样做的唯一方法是将其加载到< iframe>中.

简单:只需将高度和宽度设置为100%!除外,它不起作用.

我确实发现将frameborder设置为0,所以它至少看起来像网站的一部分,但我不希望在一个已经有一个的页面内有一个丑陋的滚动条.

你知道做这个的任何技巧吗?

编辑:我想我需要在某种程度上澄清我的问题:

>公司CMS显示我们整个网站的绒毛和东西
>通过CMS创建的大多数页面
>我的申请不是,但他们会让我把它嵌入< iframe>
>我无法控制iframe,因此任何解决方案都必须在引用的页面中工作(根据iframe标记的src属性)
> CMS显示页脚,因此将高度设置为100万像素并不是一个好主意

我可以从引用的页面访问父页面DOM吗?这可能有所帮助,但我可以看到有些人可能不希望这是可能的……

这种技术似乎有效(gleaned来自多个来源,但受到了接受答案的link的启发:

在父文件中:

  1. <iframe id="MyIFRAME" name="MyIFRAME"
  2. src="http://localhost/child.html"
  3. scrolling="auto" width="100%" frameborder="0">
  4. no iframes supported...
  5. </iframe>

在孩子:

  1. <!-- ... -->
  2. <body>
  3. <script type="text/javascript">
  4. function resizeIframe() {
  5.  
  6. var docHeight;
  7. if (typeof document.height != 'undefined') {
  8. docHeight = document.height;
  9. }
  10. else if (document.compatMode && document.compatMode != 'BackCompat') {
  11. docHeight = document.documentElement.scrollHeight;
  12. }
  13. else if (document.body
  14. && typeof document.body.scrollHeight != 'undefined') {
  15. docHeight = document.body.scrollHeight;
  16. }
  17.  
  18. // magic number: suppress generation of scrollbars...
  19. docHeight += 20;
  20.  
  21. parent.document.getElementById('MyIFRAME').style.height = docHeight + "px";
  22. }
  23. parent.document.getElementById('MyIFRAME').onload = resizeIframe;
  24. parent.window.onresize = resizeIframe;
  25. </script>
  26. </body>

顺便说一句:这只有在父和子因为安全原因限制JavaScript而在同一个域中时才有效…

解决方法

猜你在找的HTML相关文章