All geek questions in one place

Javascript: innerHTML object not populating a parent

I am having a problem loading an HTML page as an object in a div using Javascript. The HTML page loads in the correct div, but for some reason a scrollbar appears in the Div panel. I assume that the problem is related to the parent values ​​of height and width, but I could not figure it out. I want the text to increase the page length. The width is fine, but I don't want the scroll bar to be there.

Can someone help me with this problem? I would prefer not to use fixed height or width values ​​since I want my page to be as dynamic as possible.

Here are some photos that hopefully explain the problem.

enter image description here When the "Test" button at the top is selected, this is what is displayed.

enter image description here

Here is the main html file

<!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>
+4
2

, <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>
Hide result

, bae64 test.html, . url "test.html".

+4

, :

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

Source: https://habr.com/ru/post/1611969/

More articles:


All Articles