Fatal编程技术网

Javascript iframe高度适合内容

javascript html iframe

Javascript iframe高度适合内容,javascript,html,iframe,Javascript,Html,Iframe,我通过谷歌搜索在互联网上找到了大约5种方法，但它们似乎都不起作用。。。我看到人们感谢并说这是有效的，我只是因为它对我不起作用而感到沮丧，我不知道为什么 我有两个文件，test.html包含iframe和hello.html包含实际内容。我希望test.html中的iframe根据hello.html中的内容调整其高度。 我正在使用的教程： 代码如下： test.html <html> <head> <script type='text/javascript'

我通过谷歌搜索在互联网上找到了大约5种方法，但它们似乎都不起作用。。。我看到人们感谢并说这是有效的，我只是因为它对我不起作用而感到沮丧，我不知道为什么

我有两个文件，test.html包含iframe和hello.html包含实际内容。我希望test.html中的iframe根据hello.html中的内容调整其高度。 我正在使用的教程： 代码如下：

test.html

    <html>
<head>
<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>
</head>

<iframe src="hello.html" class="iframe" scrolling="no" frameborder="0"></iframe>
<html>

<html>
<body bgcolor=”#000000″>

<font color=”#ffffff”>
<p>Child frame.</p>
<p>Child frame.</p>
<p>Child frame.</p>
<p>Child frame.</p>
<p>Child frame.</p>
<p>Child frame.</p>
<p>Child frame.</p>
<p>Child frame.</p>
<p>Child frame.</p>
<p>Child frame.</p>
<p>Child frame.</p>
<p>Child frame.</p>
<p>Child frame.</p>
</font>

</body>
</html>


$（函数（）{
变量iFrames=$（'iframe'）；
函数iResize（）{
对于（变量i=0，j=iFrames.length；i
hello.html

    <html>
<head>
<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>
</head>

<iframe src="hello.html" class="iframe" scrolling="no" frameborder="0"></iframe>
<html>

<html>
<body bgcolor=”#000000″>

<font color=”#ffffff”>
<p>Child frame.</p>
<p>Child frame.</p>
<p>Child frame.</p>
<p>Child frame.</p>
<p>Child frame.</p>
<p>Child frame.</p>
<p>Child frame.</p>
<p>Child frame.</p>
<p>Child frame.</p>
<p>Child frame.</p>
<p>Child frame.</p>
<p>Child frame.</p>
<p>Child frame.</p>
</font>

</body>
</html>


子帧

子帧

子帧

子帧

子帧

子帧

子帧

子帧

子帧

子帧

子帧

子帧

子帧
下面是我得到的：

对于这种类型的代码示例，请使用jsFidle。这对所有想帮助你的人都是好的。我设法让它工作，但出于某种原因。php文件似乎不工作，有什么想法吗？修复了它，似乎iframe在边距和位置方面存在问题：绝对内部。谢谢你的关心！使用chrome也会导致问题，因为它可能会将此视为不安全的iframe操作并阻止它