Question

我正在处理的网站出现问题-主要是我似乎无法以占据整个页面的方式将HTML文档放入iframe。我也使用angular获取html文档，这就是src。这是页面当前的样子：

1）https://gyazo.com/f5cb06ede5fc0b6da99f49dfd8e32d5f 2）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>

非常感谢

Answer 1

您可以查看一些内容。首先，在CSS文档中，包括以下内容应消除iframe中滚动条的出现；

iframe{
overflow:hidden;}

但是-从现在开始，我一直在做一些猜测，因为您并没有真正了解源WRT的编码方式-您可以尝试通过限制所有内容来限制源页面的大小在具有指定大小的div中对其进行处理，这样，通过iframe调用页面时，您可以使用代码的width =“” height =“”属性（或包括它们在CSS中）。

Answer 2

如果您需要根据其内容更改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并将其作为常规内容显示在您的网站上，因此不会出现任何问题。

打招呼

tom

无法在iframe中容纳整个HTML内容

2 个答案: