HTML <object>适合其内容的高度

Question

我正在尝试使用

<object type='text/html' data='/forum'></object>

在带有

width:800px; min-height:525px;

的内容 div 中显示 phpbb 论坛。

包含正常内容的 div 正在调整大小，因此随着内容的增长它会变得越来越长。但

object

类型仅保存高度值并制作滚动条。如果我在对象上未设置高度或

height:auto

，它不会完全扩展到

divContent

大小。如果我设置高度或最小高度适合，但总是产生滚动条。

如何让

<object>

容器随着内容变长而自动调整大小？

Answer 1

正如评论中正确指出的那样，您可以将您的论坛包含在

iframe

中。

<iframe src="forum.html" width="100%" id="yourframe"></iframe>

然后你就可以得到iframe内的

div

高度，如这篇文章所示。最后，您可以根据其内容使用此高度来调整 iframe 的大小。

$(document).ready(function() {
    $( "#yourframe" ).on('load', function() { 
        var mydiv = $(this).contents().find("div");
        var h = mydiv.height();
        $(this).height(h);
    });
});

Answer 2

谢谢两位，指出正确的方向:)

我最终使用了 iframe，谢谢 Quentin。 使用以下 JavaScript：

function ResizeIframe(id){
  var frame = window.parent.document.getElementById('iframe');
  frame.style.height = frame.contentWindow.document.body.scrollHeight + "px";
 }

和 html:

echo "<iframe id='iframe' onload='ResizeIframe(\"iframe\")' src='/forum' style='width:100%; min-height:525px; border:0px; overflow-y:hidden;'></iframe>";

Giorgio > 我会进一步研究你的方法。谢谢。

Answer 3

我本来更喜欢使用iframe方法，但是当页面进行跨域资源共享时，frame.contentWindow不起作用（参见https://community.appfarm.io/t/make-iframe-automatically -根据内容调整高度/491/2和https://stackoverflow.com/a/10636765/1919793）。

我最终使用 https://stackoverflow.com/a/10312824/1919793 修改 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_html_include_1 将内容加载到父级中div 标签：

function includeHTML(src) {
    var scriptTag = document.getElementsByTagName('script');
    scriptTag = scriptTag[scriptTag.length - 1];
    var parentTag = scriptTag.parentNode;
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4) {
            if (this.status == 200) { parentTag.innerHTML = this.responseText; }
            if (this.status == 404) { parentTag.innerHTML = "Page not found."; }
        }
    }      
    xhttp.open("GET", src, true);
    xhttp.send();
}

并这样称呼它：

<script src="https://what-a-nice-url-that.is/include.js" onerror="document.write('Permission Denied')"></script>
<div><script>includeHTML('https://what-a-nice-url-that.is/index.html')</script></div>
<noscript>JavaScript Disabled</noscript>