HTML5 include - ITeye问答

0 0

HTML5 include5

我想在自己的HTML5项目中使用jquery官网提供的ui来美化页面，要使用该ui，就必须在所有页面中导入以下3段代码：

<link type="text/css" href="../css/black-tie/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
		<script type="text/javascript" src="../js/jquery-1.7.js"></script>
		<script type="text/javascript" src="../js/jquery-ui-1.8.21.custom.min.js"></script>

但是这样导入有两个问题：1.导入不方便；2.如果以后想换一个ui，就必须每个页面都重新导入相应的js。
所以我想能不能搞一个共通的html文件出来，在这个文件里定义上面3段代码，然后在其他页面中include这个共通html，这样以后要换ui时就只要改共通里面的代码就行，但是我查了下，以前的html是不支持include的（不知道HTML5里面是怎么实现），但是能用iframe来做，我也试了一下，但是这样做的效果是新页面中确实加载了共通页面进来，但是ui只作用于共通页面的部分，并不能作用于这个新页面的其他部分，显然没有达到我的预期，不知道又谁知道我想要的这个效果在html5中怎么实现？
共通html：

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" href="../css/black-tie/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
		<script type="text/javascript" src="../js/jquery-1.7.js"></script>
		<script type="text/javascript" src="../js/jquery-ui-1.8.21.custom.min.js"></script>
	</head>
</html>

个别页面的head部分导入共通html的代码：

	<head>
		<link rel="stylesheet" type="text/css" href="../css/common.css">
		<link rel="stylesheet" type="text/css" href="../css/login.css">

		<iframe marginwidth=0 marginheight=0 width=100% height=30 frameborder=0 src="ui-page.html"></iframe>	
		<script type="text/javascript" src="../js/jquery.form.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>
		<script type="text/javascript" src="../js/login.js"></script>

	</head>

2012年6月14日 22:56

lovelease
0
0 0 10

2个答案按时间排序按投票排序

0 0

这个采用nginx服务器搭，就可以使用include导入提取的公共html代码

2012年7月17日 15:05

zhanghh315
20
0 0 4

添加评论

0 0

html5网页中静态引用？

如果是通过服务器端生成HTML代码，直接在模板中写入公用的部分即可。

如果没有服务器端代码，全是客户端，可以采用javascript来做。

引用

Dynamically loading external JavaScript and CSS files

To load a .js or .css file dynamically, in a nutshell, it means using DOM methods to first create a swanky new "SCRIPT" or "LINK" element, assign it the appropriate attributes, and finally, use element.appendChild() to add the element to the desired location within the document tree. It sounds a lot more fancy than it really is. Lets see how it all comes together:

function loadjscssfile(filename, filetype){
if (filetype=="js"){ //if filename is a external JavaScript file
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", filename)
}
else if (filetype=="css"){ //if filename is an external CSS file
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
}
if (typeof fileref!="undefined")
document.getElementsByTagName("head")[0].appendChild(fileref)
}

loadjscssfile("myscript.js", "js") //dynamically load and add this .js file
loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file
loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css file

2012年6月17日 14:08