因此，我尝试在单击该网页的链接时在 div 内显示该网页。
单击链接时，我阻止浏览器转到该链接，显示 div，并给出 <object>在 div 内单击的链接的 url。
这一切都工作正常，div 显示，并且该对象获取单击链接的 url 作为其 data 属性的值。
我的问题是 <object>没有显示任何内容。根据开发工具，它在那里，但我看不到网页。
这是我的 javascript/jQuery 代码:
$('a').click(function(event){
event.preventDefault();
$('#tabViewWindow').show();
$('#tabViewWindow object').attr('data', $(this).attr('href'));
$('#tabVieWindow embed').attr('src', $(this).attr('href'));
});
这是我在本地运行时存在问题的文件的完整代码:
<!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>
最佳答案
使用 iFrame，它可以工作(至少在最新的 FF 和 Chrome 上) - 请参阅:http://jsfiddle.net/WSW9J/1/
<div id="tabViewWindow">
<iframe></iframe>
</div>
您想使用对象标签有什么原因吗？
顺便说一句，如果您只想在页面中显示另一个网站的片段，您可能会对 http://pagepeeker.com/ 感兴趣。
关于javascript - 使用 javascript/jQuery 设置 <object> 的数据属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17047821/