Javascript: innerHTML对象未填充父元素

Question

Javascript: innerHTML对象未填充父元素

4

我在使用Javascript将一个HTML页面作为对象加载到一个div中时遇到了问题。HTML页面加载到了正确的div中，但是由于某种原因，div旁边出现了滚动条。我猜测问题可能与父元素的高度和宽度值有关，但我一直没有找到解决方法。我希望文本能够延伸到整个页面长度，虽然宽度很好，但我不想要滚动条。

有人可以帮助我解决这个问题吗？我希望尽可能地使我的页面动态化，所以不想使用任何固定的高度或宽度值。

以下是一些图片，希望可以解释问题。

当选择顶部的“Test”按钮时，显示如下。

这是主要的html文件。

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    </head>
    <body>
        <div class="blog-masthead">
            <div class="container">
                <nav class="blog-nav">  
                    <a id="navHome" class="blog-nav-item active">Home</a>
                    <a id="navTest" class="blog-nav-item" onclick="showTest()">Test</a>
                </nav>
            </div>
        </div>
        <div class="container">
            <div class="blog-header">
                    <h1 class="blog-title">This is a test site</h1>
            </div>
            <div class="row" style="overflow:hidden;">
                <div id="mainPost" class="col-sm-8 blog-main">
                    <!--Loaded content goes here-->
                </div>
            </div>
        </div>
        <script>
            function showTest() {
                document.getElementById("mainPost").innerHTML = '<object type="text/html" data="test.html" style="min-width:100%; min-height: 101%;  style="overflow:hidden;" ></object>';
            }
        </script>
    </body>
</html>

这是我正在尝试加载的test.html文件。

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<div class="blog-post">
    <h2 class="blog-post-title">Test</h2>
    <p class="blog-post-meta">October 18, 2015 by Test</p>
    <p>
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </p>
</div>

- bbb

"col-sm-8 blog-main" 类是什么，它们是否定义了溢出？ - Igor

"col-sm-8" 类是 Twitter Bootstrap 的一部分，该库在头部被引用。而 "blog-main" 类则属于一个单独的 CSS 文件，而此示例中并未使用。我发布的代码是一个简化版本，"blog-main" 类是我忘记删除的东西。 - bbb

2个回答

1

首先，您的样式属性不正确：

'<object type="text/html" data="test.html" style="min-width:100%; min-height: 101%;  style="overflow:hidden;" ></object>'

- Evgeny Samsonov

3

"首先"表示您有其他要说的事情。此外，当您有4个前导空格时，不需要\字符。删除它们后，代码将正确着色。 - freefaller

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tim · Accepted Answer

我不确定使用<object>是否有效，但是可以使用<iframe>：

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    </head>
    <body>
        <div class="blog-masthead">
            <div class="container">
                <nav class="blog-nav">  
                    <a id="navHome" class="blog-nav-item active">Home</a>
                    <a id="navTest" class="blog-nav-item" onclick="showTest()">Test</a>
                </nav>
            </div>
        </div>
        <div class="container">
            <div class="blog-header">
                    <h1 class="blog-title">This is a test site</h1>
            </div>
            <div class="row" style="overflow:hidden;">
                <div id="mainPost" class="col-sm-8 blog-main">
                    <!--Loaded content goes here-->
                </div>
            </div>
        </div>
        <script>
            var url = "data:text/html;base64,PGhlYWQ+DQogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJodHRwczovL21heGNkbi5ib290c3RyYXBjZG4uY29tL2Jvb3RzdHJhcC8zLjMuNS9jc3MvYm9vdHN0cmFwLm1pbi5jc3MiPg0KPC9oZWFkPg0KPGRpdiBjbGFzcz0iYmxvZy1wb3N0Ij4NCiAgICA8aDIgY2xhc3M9ImJsb2ctcG9zdC10aXRsZSI+VGVzdDwvaDI+DQogICAgPHAgY2xhc3M9ImJsb2ctcG9zdC1tZXRhIj5PY3RvYmVyIDE4LCAyMDE1IGJ5IFRlc3Q8L3A+DQogICAgPHA+DQogICAgICAgICJMb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCwgY29uc2VjdGV0dXIgYWRpcGlzY2luZyBlbGl0LCBzZWQgZG8gZWl1c21vZCB0ZW1wb3IgaW5jaWRpZHVudCB1dCBsYWJvcmUgZXQgZG9sb3JlIG1hZ25hIGFsaXF1YS4gVXQgZW5pbSBhZCBtaW5pbSB2ZW5pYW0sIHF1aXMgbm9zdHJ1ZCBleGVyY2l0YXRpb24gdWxsYW1jbyBsYWJvcmlzIG5pc2kgdXQgYWxpcXVpcCBleCBlYSBjb21tb2RvIGNvbnNlcXVhdC4gRHVpcyBhdXRlIGlydXJlIGRvbG9yIGluIHJlcHJlaGVuZGVyaXQgaW4gdm9sdXB0YXRlIHZlbGl0IGVzc2UgY2lsbHVtIGRvbG9yZSBldSBmdWdpYXQgbnVsbGEgcGFyaWF0dXIuIEV4Y2VwdGV1ciBzaW50IG9jY2FlY2F0IGN1cGlkYXRhdCBub24gcHJvaWRlbnQsIHN1bnQgaW4gY3VscGEgcXVpIG9mZmljaWEgZGVzZXJ1bnQgbW9sbGl0IGFuaW0gaWQgZXN0IGxhYm9ydW0uIg0KICAgIDwvcD4NCjwvZGl2Pg==";
          
            function showTest() {
                document.getElementById("mainPost").innerHTML = '<iframe src="'+url+'" style="width:100%; height:100%; overflow: hidden; border:none;" scrolling="no"  seamless="seamless"></iframe>';
            }
          
            showTest()
        </script>
    </body>
</html>

请注意，我对test.html进行了base64编码，以使这个示例可以工作。您可以用"test.html"来替换变量url。