jQuery Include HTML：jQuery替代iframe插入Include HTML方法[JQincludeHTML]
jQuery Include HTML：jQuery替代iframe插入Include HTML方法[JQincludeHTML]
資料來源: https://www.ucamc.com/e-learning/javascript/113-jquery-include-html
GITHUB:https://github.com/jash-git/JQincludeHTML
code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery include HTML</title>
<script type="text/javascript" src="js/jquery-1.6.min.js"></script>
<script type="text/JavaScript">
$(document).ready(function(){
$.get("a.html",function(data){ //初始將a.html include div#iframe
$("#iframe").html(data);
});
$(function(){
$('.list-side li').click(function() {
// 找出 li 中的超連結 href(#id)
var $this = $(this),
_clickTab = $this.find('a').attr('href'); // 找到連結a中的href標籤值
if("-1"==_clickTab.search("http://")){ //不是http://執行以下
$.get(_clickTab,function(data){
$("#iframe").html(data);
});
return false
}
})
})
});
</script>
<style type="text/css">
body{
background-color: #CCC;
}
.list-side{
list-style-type: none;
}
#iframe {
border: 1px solid #FFF;
padding: 10px;
min-height: 800px;
}
.list-side li {
width: 180px;
}
.list-side li a {
cursor:pointer;
color: #333;
font-weight: bold;
background-color: #FFF;
display: block;
margin-bottom: 1px;
padding-left: 5px;
}
.mmuser {
width: 100%;
}
.list-side li a:hover {
background-color: #666;
color: #FFF;
}
.sa{
width: 250px;
}
#sidebar {
vertical-align: top;
}
</style>
</head>
<body>
<table class="mmuser">
<col class="sa" />
<col class="sb" />
<tr>
<td id="sidebar">
<h2>JQUERY HTML INCLUDE</h2>
<ul class="list-side">
<li><a href="a.html" >about</a></li>
<li><a href="b.html" >news</a></li>
<li><a href="c.html" >product</a></li>
<li><a href="http://www.ucamc.com" target="_blank" >UCAMC</a></li>
</ul>
</td>
<td id="cmmin">
<div id="iframe">
<!--jquery 插入html 位址-->
</div>
</td>
</tr>
</table>
</body>
</html>
教學PDF:
2 thoughts on “jQuery Include HTML：jQuery替代iframe插入Include HTML方法[JQincludeHTML]”
Div裡面載入另一個頁面的實現（取代框架）（AJax）
前提
有一個公共的登入彈框頁面需要在多個頁面引用，百度後就使用了jQuery 的 load 方法。
做法：
將公共的 html 頁面提取出來，放在一個獨立的 HTML 檔案中。
然後在需要使用的 html 頁面中，使用 jQuery 的 load 方法進行引用即可。
注：提取的部分，不需要包含多餘的、等標籤，只需要放置你所用到的標籤即可。