Question

我在使用Javascript将HTML页面作为对象加载到div时遇到问题。 HTML页面加载到正确的div中，但由于某种原因，div的一侧会出现滚动条。我猜这个问题与父高和宽度值有关，但我还没有弄清楚。我希望文本扩展页面的长度。宽度很好，但我不希望滚动条在那里。

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

以下是一些有希望解释这个问题的图片。

当＆＃34;测试＆＃34;选中顶部的按钮，这里显示的是什么。

这是主要的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>

Answer 1

我不确定它是否与<object>一样，但它适用于<iframe>：

＆＃13;

<!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>

＆＃13;

请注意，我使用bae64编码test.html来使此示例正常工作。您可以将变量url替换为"test.html"。

Answer 2

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

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

Javascript：innerHTML对象没有填充父级

2 个答案: