无法在iframe中容纳整个HTML内容怎么办?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (92)

我有一个问题,一个网站,我正在工作-主要是,我似乎不能把一个HTML文档到一个iframe的方式,它占据整个页面。我还使用Ranges来获得html文档,这就是src。这就是现在页面的样子:

1)https://gyazo.com/f5cb06ede5fc0b6da99f49dfd8e32d5f2)https://gyazo.com/c9ad51e9bfaa12fedc4e1c2dbcbb7b42

注意,有一个滚动条,这是我的问题。如何摆脱滚动条并显示网页的内容,使其在没有滚动条的情况下完全扩展?这是我的代码供参考:

 <iframe id="content" [src] = "recipeHTML | safe">

 </iframe>

      <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
      <script type='text/javascript'>

    $(function(){

        var iFrames = $('iframe');

        function iResize() {

            for (var i = 0, j = iFrames.length; i < j; i++) {
            iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
            }

            if ($.browser.safari || $.browser.opera) { 

            iFrames.load(function(){
                setTimeout(iResize, 0);
            });

            for (var i = 0, j = iFrames.length; i < j; i++) {
                    var iSource = iFrames[i].src;
                    iFrames[i].src = '';
                    iFrames[i].src = iSource;
            }

            } else {
            iFrames.load(function() { 
                this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
            });
            }

        });

</script>

非常感谢

提问于
用户回答回答于

如果你需要根据其内容更改iframe的维度,则需要一些Javascript才能这样做。

你首先需要回答的是,IFRAME是否是在同一领域或如果它是跨域加载。

在这里描述的相同域上,它更容易实现:https://css-tricks.com/snippets/jquery/fit-iframe-to-content/看起来和你的尝试非常相似。

在跨域方面也要更深入一点:https://css-tricks.com/cross-domain-iframe-resizing/

但是最好的解决方案可能是将所有的内容放在一个CMS中,或者服务器代理(PHP或其他什么)中,加载iframe的HTML并将其显示在站点上作为正常的内容,这样就不会有问题了。

用户回答回答于

有几件事你可以看看。首先,在CSS文档中,包括以下内容应消除滚动条在IFRAME中的出现;

iframe{
overflow:hidden;}

扫码关注云+社区

领取腾讯云代金券