javascript - 无法将整个 HTML 内容放入 iframe

标签 javascript css angular html

我正在处理的网站出现问题 - 主要是我似乎无法以占据整个页面的方式将 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>

非常感谢

最佳答案

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

iframe{
overflow:hidden;}

但是 - 从现在开始我会做一些猜测,因为你并没有真正给我们太多关于源 WRT 它是如何编码的 - 你可以尝试通过限制所有内容来限制源页面的大小在具有指定大小的 div 中,这样当通过 iframe 调用页面时,您可以使用标签的 width=""height=""属性明确告诉 iframe 具有相同的高度和宽度(或包括它们在 CSS 中)。

关于javascript - 无法将整个 HTML 内容放入 iframe,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51601359/

相关文章:

javascript - 每 1 分钟返回一次 promise ?

javascript - Ng Date Picker 如何格式化为不同的输出而不是 ISO-8601

angular - 在 Primeng 的 p 表中调用 onEditComplete 后没有事件数据

javascript - 从 Observable<T> 过滤所有 'null' 值

Javascript 构造函数重写

javascript - 文件浏览器未显示在 Django-tinymce 中

javascript - MDC 的 forEach 中的注释字符有什么作用?

javascript - 无法纠正错误 "Fail 1 - Table tag should have 3 rows and check with the requirements for CSS for table and tr"

css - 为什么我不重新启动 WEBrick 就不会显示我的 css 更改?

定位的 CSS 简写