我正在工作的一个网站有一个问题--主要是我似乎不能把一个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>
非常感谢
发布于 2018-07-31 04:19:19
这里有一些你可以看的东西。首先,在CSS文档中,包含以下内容应消除iframe中滚动条的外观;
iframe{
overflow:hidden;}
然而,从这里开始,我做了一些猜测,因为你并没有给我们太多关于源WRT是如何编码的-你可以尝试限制源页面的大小,方法是将它限制在一个指定大小的div中,这样当页面通过iframe调用时,你可以使用标签的width="“height="”属性显式地告诉iframe具有相同的高度和宽度(或者将它们包含在CSS中)。
发布于 2018-07-31 05:20:15
如果您需要根据其内容更改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并将其作为普通内容显示在您的网站上,这样就不会留下任何问题。
大家好,
汤姆
https://stackoverflow.com/questions/51601359
复制相似问题