外部html页面未在div中加载

Question

I am trying to load an externalpage inside div.On clicking one div I expect the another web page to be loaded inside another div.But the web page is not loading on the second div.Here is the fiddle.

https://jsfiddle.net/user1989/xpp5t6nv/9/

<div id="fileTreeDemo_1" class="demo" onclick="alert1()">abc</div> <div id="upload_target" name="upload_target" ></div>

<style>
html,body{
    height:100%;
    width:100%;
}
body{
    margin: 0 0 0 0;
    padding:0 0 0 0;

}
div{
    box-sizing: border-box;-moz-box-sizing: border-box;
    height:100%;
    display: inline-block;
}
body > div:first-child{
    width:20%;
    border:solid 2px green;
}
body > div:nth-child(2){
    width:80%;
    border:solid 2px blue;
    float:right;
}

function alert1(){

document.getElementById("upload_target").innerHTML='<object type="text/html" data="https://www.google.co.in" ></object>';

}
alert1()

Answer 1

Try this one.

 function load_home() { document.getElementById("content").innerHTML = '<object type="type/html" data="home.html" ></object>'; } 

 <div id="topBar"> <a href="#" onclick="load_home()"> HOME </a> </div> <div id="content"></div> 

Answer 2

This is "Cross-Origin Resource Sharing" (unless your page is inside the google.co.in domain). Long story here: https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

Your code will work as is using a Url within your own domain. Most sites do not allow it. Browsers vary in how tolerant they are of it. If the target is in your control you can add the following to the header of the target page to allow it -

Access-Control-Allow-Origin: *

See this for more. http://enable-cors.org/server.html

If not you can proxy the external page serverside with php, node.js or asp, then hit your proxied page for the object's data. But that is a whole different topic.