0

我在这里疯了。我在这里找到了一个脚本，据说它也可以在 chrome 上工作，但我就是无法让它工作

这是我标题中的脚本

<script type="text/javascript">
function resizeFrame() {
     var t=document.getElementById("Footer");
     var f = document.getElementById("mainContent");
     var y = f.contentWindow;
     t.innerHTML = y.document.body.offsetHeight;
     f.height = y.document.body.offsetHeight;
    }
</script>

和 iframe

 <iframe onload="resizeFrame()" id="mainContent" src="swwbookpg1.php" scrolling=auto frameborder=0 
height="100%" width="100%">Working!</iframe>
<p id="Footer"> Footer</p>

它适用于 Firefox 和 IE，但不适用于 chrome。

如果有人可以提供帮助，那就太棒了！

这里正在使用：https ://www.whalewatchingsydney.com.au/payment_sww/

谢谢 =)

4

2 回答 2

1

谷歌似乎辜负了他们的标语“不作恶”。虽然 Chrome 能够动态调整 iframe 高度，但谷歌并没有让它变得很容易。经过两天的努力解决这个问题并尝试了大量的 JavaScript 片段，这些片段在所有其他浏览器中都能完美运行，但 Chrome 终于设法得到了一些可以工作的东西。我将分享这一点，希望能帮助其他网站开发人员免去我不得不经历的 48 小时痛苦。

在外部 SetiFrameHeight.js 文件中，然后可以将其添加到任何带有 html 的 iframe 子文档中。

<script type="text/javascript" src="SetiFrameHeigh.js"></script>

setIframeHeight.js

window.onload=setIframeHeight(window.top.document.getElementById('iFrame_ID'));
//note this code only runs serverside when using Google Chrome, very helpful


function setIframeHeight(ifrm){
    var doc = ifrm.contentDocument? ifrm.contentDocument:
    ifrm.contentWindow.document;
    var RestHeight=ifrm.style.height; //Capture original height see why below.
    ifrm.style.visibility = "hidden";
    ifrm.style.height = "10px"; //Necessary to work properly in some browser eg IE
    var NewHeight = getDocHeight( doc ) + 10;
    if (NewHeight>20){
        ifrm.style.height=NewHeight + "px";
    } else { //if dom returns silly height value put back old height see above.
        ifrm.style.height=RestHeight + "px";
    }
    ifrm.style.visibility = "visible";
}

function getDocHeight(doc) {
    doc = doc || document;
    var body = doc.body, html = doc.documentElement;
    var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight,
    html.scrollHeight, html.offsetHeight );
    return height;
}

这段代码片段的真正魔力在于函数 getDocHeight，它基本上尝试了所有可能的 dom 组合并选择给出最大高度的组合。我不能把它归功于http://www.christersvensson.com/html-tool/iframe.htm。

于 2014-01-07T21:17:47.863 回答
0

铬：

  1. 我发现当我使用 document.createElement 创建一个 iFrame 并为其指定一个名称（“myIframe”）时，新的 iFrame 在我设置它的位置时不会加载内容。但是，如果我为元素的 src 分配一个 url，它就可以正常工作。现在，当我在 html 文本中手动插入 iframe 标记时（静态——而不是使用 document.createElement），它会在设置其位置（以及标记的 src）时加载文档。奇怪的。

  2. 假设您打算直接显示 iframe 的内容，我想知道为什么？我喜欢使用 iframe，但实际上只是将内容动态加载到顶部窗口中的容器中。加载到 iframe 中的 html 的最后一部分包括一个脚本，该脚本将输出移动到顶部框架的所需位置。

通过 iFrame 加载新内容的 php 脚本示例。

// top Frame calls the php script like this:

 <div id="myContainerDiv">
    <p>old content - please replace me with fresh content</p>
</div>


<iframe name="hiddenFrame" style="display:none;"></iframe>

<script>

    hiddenFrame.location = 'index.php?getNewContent=125';

</script>


// the following script would be at the top of index.php

<?php //

if( isset($_GET['getNewContent']) ):


echo '<div id="myIframeHtml">';

    // the html that I want to load to the top frame..


echo '</div>';

?>
<script>

    newContent = document.getElementById('myIframeHtml').innerHTML; // from this iFrame

    topContainer = top.document.getElementById('myContainerDiv'); // in top frame

    topContainer.innerHTML = newContent; // no fuss-no muss --> no encoding or parsing

</script>

<?php

exit;

endif;
于 2014-03-12T16:42:17.383 回答