jQuery Include HTML:jQuery替代iframe插入Include HTML方法[JQincludeHTML]

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]

  1. 前提
    有一個公共的登入彈框頁面需要在多個頁面引用,百度後就使用了jQuery 的 load 方法。

    做法:

    將公共的 html 頁面提取出來,放在一個獨立的 HTML 檔案中。
    然後在需要使用的 html 頁面中,使用 jQuery 的 load 方法進行引用即可。
    注:提取的部分,不需要包含多餘的、等標籤,只需要放置你所用到的標籤即可。

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *