So, I am trying to display a webpage inside a div on click of a link to that webpage.
On click of the link, I prevent the browser from going to the link, show the div, and give the <object> inside the div the url of the link that was clicked.
This all works fine, the div shows, and the object gets the url of the clicked link as the value of its data attribute.
My problem is that the <object> is not displaying anything. According to dev tools it is there, but I don't see the webpage.
Here is my javascript / jQuery code:
$('a').click(function(event){
event.preventDefault();
$('#tabViewWindow').show();
$('#tabViewWindow object').attr('data', $(this).attr('href'));
$('#tabVieWindow embed').attr('src', $(this).attr('href'));
});
and here is the full code of the file where the problem exists when I run it locally:
<!Doctype HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Tab View</title>
<style type="text/css">
html, body{
height:100%;
width:100%;
margin:0;
padding:0;
}
#tabViewWindow{
height:100%;
height:100vh;
width:100%;
width:100vw;
position:absolute;
background:#000000;
display:none;
left:0;
top:0;
z-index:10000000000000000;
}
embed, object, iframe, img{
max-width:100%;
margin:0 auto;
display:block;
}
object{
height:100%;
width:100%;
}
</style>
</head>
<body>
<div id="tabViewWindow">
<object data="">
<embed src="" />
</object>
</div>
<br />
<br />
<a href="http://wolfram.com">Wolfram.com</a>
<br />
<br />
<a href="http://wikipedia.org">Wikipedia.org</a>
<br />
<br />
<a href="http://google.com">Google.com</a>
<br />
<br />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$('a').click(function(event){
event.preventDefault();
$('#tabViewWindow').show();
$('#tabViewWindow object').attr('data', $(this).attr('href'));
$('#tabVieWindow embed').attr('src', $(this).attr('href'));
});
</script>
</body>
</html>