Question

我试图在div中加载一个html页面。它运作良好，除了＆＃34;加载＆＃34;页面只填充父母的一小部分。

这是加载HTML的函数：

function load_inner() {
    Content.innerHTML='<object type="text/html" data="page_test.html"></object>';
}

要填充的 div 是500 * 200px。

加载的页面应该填充父级，但在这种情况下，内部div 设置为1000 * 500px用于测试目的（父级具有溢出属性设置为隐藏）。

这是加载内容的页面（所有内容都被 html 标记包围）：

<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="generator" content="Geany 1.23.1" />
    <style type="text/css">
        #Content { width:500px; height:200px; background:orange; overflow:hidden;}
    </style>
    <script type="text/javascript">
        function load_inner() { 
            Content.innerHTML='<object type="text/html" data="page_test.html"></object>';
        }
    </script>
</head>

<body onload="load_inner()">
    <div id="Content"></div>
</body>

这是加载的页面（所有内容都被 html 标记包围）：

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 1.23.1" />
    <style type="text/css">
        #Cont { background:yellow; }
        body { margin:0px; padding:0px; }
    </style>
</head>

<body>
    <div id="Cont">
        <span>IM A TEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEST</span>
    </div>
</body>

这就是结果：

Bad result

我已经做了一些测试，似乎这只发生在对象标记上。

这样可行（内容不是＆＃34;有限＆＃34;）：

Content.innerHTML='g...g';

String set directly

如果我向目标页面发送GET请求并将innerHTML设置为＆＃34; responseText＆＃34;它显示正确：

function load_home() {         
     var url = "http://localhost/inner_load/page_test.html";
     var method = "GET";
     var async = true;
     var request = new XMLHttpRequest();
     request.onload = function () {
        var data = request.responseText;
        Content.innerHTML=request.responseText;
     }
     request.open(method, url, async);
     request.send();
  }

Loaded via http request

对象标记有什么问题，如何解决？提前谢谢！

Answer 1

如果将对象的宽度设置为100％，则100％反映父div的宽度（橙色）而不是加载的内容 - 因此您将1000px div加载到500px（其父级的100％））对象标签。如果您不想要滚动条，则需要将对象的大小设置为与要加载到其中的内容相同的大小，即1000px。所以答案是对象标签没有任何问题。

示例：

  <div id="content"> //500px
    <object> //at 100% it is also 500px
       <div>Loaded content</div> //this is 1000px and hence the scrollbar on a parent object
    </object>
</div>

innerHTML不填充父级

1 个答案: