Question

您好我在博客博客中使用iframe full height。

使用的CSS是：

#iframe {
   height: 100%; 
   width: 100%; 
   display: block;
   border:0;
   margin:0;
   padding:0;
}

和Javascript是：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
    var height = window.innerHeight;

    $(document).ready( function(){
       $('iframe').css('height', height);
    } );
</script>

和HTML是：

<iframe id="iframe" src="http://mybloggertricks.com"></iframe>

我在Dreamviewer中使用相同的上述属性进行了测试，它在IE中运行良好。但只有博客才能在IE浏览器中工作。请帮助我解决这个问题请帮助。

在这里看到博客： http://new-temp.blogspot.com/2012/12/my-blogger-tricks.html

Answer 1

iframe监控他的负载，代码如下：

 var height = window.innerHeight, iframe = $('iframe');
 iframe.load(function(){
     setTimeout(function(){
         iframe.css('height', height);
     }, 100);
 });

Answer 2

以下是一个向博客添加博客iframe的工具：http://www.makingdifferent.com/online-iframe-generator-tool-for-blogwebsite/

如果这没有帮助。您可以使用以下代码作为指南。只需将整个代码复制并粘贴到博客页面或帖子中，即可查看iframe如何扩展100％的高度。

如果您不希望宽度扩展100％，只需更改所有宽度部分以匹配您所需的宽度：

<style>
#inside-iframe {
height:100%;
width:100%;
position: fixed;
scroll: no;
top:0px;
left:0px;
padding:0px;
z-index:9999;
}

body {
width:100%; 
height:100%; 
}
html {
width:100%; 
height:100%; 
}
</style>

<div id="inside-iframe">
<object width="100%" height="100%"><embed src="http://mybloggertricks.com" width="100%" height="100%"></embed></object>
</div>

iframe在博客博客中不起作用

2 个答案: