2014-04-10 97 views
1

我正試圖在div中加載html頁面。它運行良好,除了「已加載」頁面僅填充父項的一小部分。innerHTML不填充父項

這是加載HTML功能:

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

DIV待填充爲500 * 200像素。

加載的頁面是爲了填補父,但在這種情況下,內的div設置爲1000 * 500像素用於測試目的(父有溢出屬性設置爲隱藏)。

這是加載內容(一切由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

我已經做了一些測試,似乎只有對象標籤發生。

該工程確定(內容不是「有限」):

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

String set directly

如果我發送一個GET請求到目標頁面和的innerHTML設置爲「responseText的」它顯示正確:

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

對象標記有什麼問題,以及如何解決此問題?提前致謝!

+0

你試過造型對象標記爲100%? – bensonsearch

+0

您不會顯示任何HTML中包含''標籤的HTML。這讓我感到困惑。 – jfriend00

+0

@bensonsearch是的,我做了:'注意:我可以將對象標記設置爲父(通過css)的100%w&h,並且它完全填充它,但這些滾動條仍然顯示。' – arielnmz

回答

2

如果您將對象的寬度設置爲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> 
+0

好的。爲了測試目的,我將它設置爲100%。謝謝你指出,我會解決這個問題。問題是我沒有指定對象大小和「加載的div」大小。對象標籤始終調整爲大約150 * 100px,並添加滾動條(如果加載的內容更大)。如果我發送GET請求,並經由了XMLHttpRequest()對象加載頁面這不會發生,儘管對象變量沒有在後者使用。 – arielnmz

+0

,如果你不使用對象標籤(推薦) - 你不會有任何問題。對象實現仍然有點不同從瀏覽器到瀏覽器 – Michal

+0

謝謝。我期待更多的見解,但我認爲沒有太多可以說的。再次感謝! – arielnmz