昨天在項目中遇到一個關於js動態創建一個<a href="資源地址" />然後append到<body>標籤上顯示的問題，發現添加到<body>標籤上無法顯示，代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>展示圖片</title>
<style>
.dialog {
position: fixed;
width: 700px;
height: 700px;
left: 50%;
margin-left: -350px;
top: 100px;
border: 0px solid rgb(70, 233, 253);
background-color: rgba(78, 108, 140, 0.66);
z-index: 20;
}
.dialog-head {
height: 40px;
width: 100%;
border-bottom: 1px white dotted;
opacity: 1;
}
.close-btn {
float: right;
line-height: 40px;
cursor: pointer;
margin-right: 12px;
color: white;
}
.dialog-content {
width: 100%;
height: 100%;
}
.dialog-img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
顯示圖片
</body>
<input type ='button' value='預覽' οnclick='preview("完整的url地址")'>
<script src="jquery.min.js"></script>
<script>
function preview(addr){
var dlgStr = '<div class="dialog"><div class="dialog-head"><div class="close-btn" οnclick="closeDlg()">關閉</div></div><div class="dialog-content"><a href="'
+ addr + '" class="dialog-img"/></div></div>';
$('body').append(dlgStr)；
}
function closeDlg(){
$(".dialog").remove();
}
</script>
</html>經過對上面問題現象的分析，我們可以使用jquery的media插件來解決這個問題，這個插件可以在線預覽一些文檔個是的資源文件，例如：pdf,word等比較常用的文件格式資源。
下面是改進後的代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>展示圖片</title>
<style>
.dialog {
position: fixed;
width: 700px;
height: 700px;
left: 50%;
margin-left: -350px;
top: 100px;
border: 0px solid rgb(70, 233, 253);
background-color: rgba(78, 108, 140, 0.66);
z-index: 20;
}
.dialog-head {
height: 40px;
width: 100%;
border-bottom: 1px white dotted;
opacity: 1;
}
.close-btn {
float: right;
line-height: 40px;
cursor: pointer;
margin-right: 12px;
color: white;
}
.dialog-content {
width: 100%;
height: 100%;
}
.dialog-img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
顯示圖片
</body>
<input type ='button' value='預覽' οnclick='preview("http://www.cnblogs.com/tangzhengyue/p/4315393.html")'>
<script src="jquery.min.js"></script>
<script src="jquery.media.js"></script>
<script>
function preview(addr){
//carImg.closeDlg();
var dlgStr = '<div class="dialog"><div class="dialog-head"><div class="close-btn" οnclick="closeDlg()">關閉</div></div><div class="dialog-content"><a href="'
+ addr + '" class="dialog-img"/></div></div>';
$('body').append(dlgStr)
$('.dialog-img').media({
width : 700,
height : 700
});
}
function closeDlg(){
$(".dialog").remove();
}
</script>
</html>上面的代買可以完美的解決資源文件在頁面動態顯示問題。
完整的demo示例地址： http://download.csdn.net/detail/zhengyangzkr/9822029
