php - vue - 设置iframe高度




根据内容高度调整iframe的高度 (8)

@ SchizoDuckie的答案非常优雅和轻量级,但由于Webkit缺乏对scrollHeight的实现(请参阅here ),因此无法在基于Webkit的浏览器(Safari,Chrome和各种各样的移动平台)上使用。

对于Webkit和Gecko和Trident浏览器一起工作的基本想法,只需要替换即可

<body onload='parent.resizeIframe(document.body.scrollHeight)'>

<body onload='parent.resizeIframe(document.body.offsetHeight)'>

只要所有东西都在同一个域中,这个工作就很好。

我在我的网站上打开我的博客页面。 问题是我可以给一个iframe的宽度,但高度应该是动态的,以便在iframe中没有滚动条,它看起来像一个单一的页面...

我已经尝试了各种JavaScript代码来计算内容的高度,但所有这些都给访问拒绝权限错误,并没有用。

<iframe src="http://bagtheplanet.blogspot.com/" name="ifrm" id="ifrm" width="1024px" ></iframe>

我们可以使用Ajax来计算高度还是使用PHP?



你可以用JavaScript来做到这一点。

document.getElementById('foo').height = document.getElementById('foo').contentWindow.document.body.scrollHeight + "px";

尝试在iframe标签上使用scrolling=no属性。 Mozilla也有你可能会研究的overflow-xoverflow-y CSS属性。

就高度而言,您也可以在iframe代码上尝试height=100%


拟合IFRAME内容在Google上很容易找到 。 这里有一个解决方案

<script type="text/javascript">
    function autoIframe(frameId) {
       try {
          frame = document.getElementById(frameId);
          innerDoc = (frame.contentDocument) ? frame.contentDocument : frame.contentWindow.document;
          objToResize = (frame.style) ? frame.style : frame;
          objToResize.height = innerDoc.body.scrollHeight + 10;
       }
       catch(err) {
          window.status = err.message;
       }
    }
</script>

这当然不能解决你遇到的跨域问题......如果这些站点在同一个地方,那么设置document.domain可能会有所帮助。 如果你是随机站点,我认为没有解决方案。


直接回答你的两个子问题:不,你不能用Ajax做这件事,也不能用PHP来计算它。

我过去所做的是使用window.onload的iframe'd页面的触发器(NOT domready ,因为它可能需要一段时间才能加载图像)将页面的身高传递给父级。

<body onload='parent.resizeIframe(document.body.scrollHeight)'>

然后parent.resizeIframe如下所示:

function resizeIframe(newHeight)
{
    document.getElementById('blogIframe').style.height = parseInt(newHeight,10) + 10 + 'px';
}

Et瞧,你有一个强大的调整器触发一旦页面完全呈现没有讨厌contentdocument vs contentWindow摆弄:)

当然,现在人们首先会在默认高度看到你的iframe,但这可以通过首先隐藏你的iframe并仅显示“加载”图像来轻松处理。 然后,当resizeIframe函数启动时,在其中放置两条额外的行,以隐藏加载图像,并显示用于人造Ajax外观的iframe。

当然,这只适用于同一个域,所以你可能希望有一个代理PHP脚本来嵌入这些东西,一旦你去了那里,你也可以直接用PHP将你的博客的RSS源嵌入到你的站点中。


试试这个,即使你想要,你也可以改变。 这个例子使用jQuery。

$('#iframe').live('mousemove', function (event) {   
    var theFrame = $(this, parent.document.body);
    this.height($(document.body).height() - 350);           
});

这里是我使用MooTools在Firefox 3.6,Safari 4.0.4和Internet Explorer 7中运行的问题的解决方案:

var iframe_container = $('iframe_container_id');
var iframe_style = {
    height: 300,
    width: '100%'
};
if (!Browser.Engine.trident) {
    // IE has hasLayout issues if iframe display is none, so don't use the loading class
    iframe_container.addClass('loading');
    iframe_style.display = 'none';
}
this.iframe = new IFrame({
    frameBorder: 0,
    src: "http://www.youriframeurl.com/",
    styles: iframe_style,
    events: {
        'load': function() {
            var innerDoc = (this.contentDocument) ? this.contentDocument : this.contentWindow.document;
            var h = this.measure(function(){
                return innerDoc.body.scrollHeight;
            });            
            this.setStyles({
                height: h.toInt(),
                display: 'block'
            });
            if (!Browser.Engine.trident) {
                iframe_container.removeClass('loading');
            }
        }
    }
}).inject(iframe_container);

设置“加载”类以在iframe容器中间显示一个Ajax加载图形。 然后,对于Internet Explorer以外的浏览器,一旦加载内容完成,它将显示完整高度的IFRAME,并删除加载图形。





iframe