在div中加载外部html页面对我不起作用

Question

i have a web interface that includes a menu and a div with id "content" and i want to load many external html pages in the div using the menu, i have a problem in the code it shows only blanc. this is the script :

 <script> 
function check() {
 document.getElementById("content").innerHTML='<object type="text/html" 
data="form.html" ></object>';
}
</script>

and this is the code of the menu (just a part of the code):

 <li><a href="#home" onclick="check();">Acceuil</a></li>
  <li>
   <a href="gp">Gestion du personnel</a>

  </li>

and here where i want to load the div:

<div id="content"> 

<div class="background"></div>
 <div class="Bienvenue"><b>  &emsp; Bienvenue sur la page  d'accueil</b> 
</div>

 </div>

i don't know if it's necessary that the div must be empty, so please if you know anything help me

Answer 1

i changed
<object type="text/html" data="form.html" ></object>'; with <embed type="text/html" src="form.html" ></embed>'; it works now

Answer 2

I'm not really sure using an object tag for loading HTML is standard, doing this appears to work similar to an IFrame , so I would personally use that. Or better still load content with either ajax or fetch ..

Saying all this using the object tag does seem to work, here is a working snippet. I've also include the IFrame version commented out.

 function check() { document.getElementById("content").innerHTML='<object type="text/html" data="https://stacksnippets.net/"></object>'; //document.getElementById("content"). // innerHTML='<iframe src="https://stacksnippets.net/"/>'; } 

 <li><a href="#home" onclick="check();">Acceuil</a></li> <li> <a href="gp">Gestion du personnel</a> </li> <div id="content"> <div class="background"></div> <div class="Bienvenue"><b> &emsp; Bienvenue sur la page d'accueil</b> </div>