iframe

最新推荐文章于 2024-09-10 05:23:21 发布

lzwldlzw

最新推荐文章于 2024-09-10 05:23:21 发布

阅读量490

点赞数 1

文章标签： iframe stylesheet button scripting function html

本文链接：https://blog.csdn.net/lzwldlzw/article/details/3251423

版权

关键字: ajax/javascript相关

以前的项目中用到了Ajax,采用的是Ajaxanywhere和iframe实现的局部刷新,现在做的项目中也要用到Ajax,顺便想起了iframe的刷新,虽然iframe的刷新不是异步的,但效果也相当不错.在网上也看到许多帖子里也写到了,在这里写上两个例子,也算是总结了,但有的代码是网上的例子改的,因为有的有点问题我都改了过来,可以直接运行看到效果的.
例一iframe.html代码如下:

Html代码

<html>
<head>
<title>Example of remote scripting in an IFRAME</title>
<script >
function tosay(){
alert('this function is called from server.html');
}
function target(){
var ifrm = document.getElementsByName('passframe')[0];
ifrm = document.getElementById('passframe');
ifrm.src = 'server.html';
}
</script>
</head>
<body>
<h1>Remote Scripting with an TFRAME </h1>
<iframe id="passframe" name="passframe" style="width:0px;height:0px;border:0px;" src="about:blank"></iframe>
<a href="javascript:target();">call the server</a>
<input type="button" value="button" src="server.html" onclick="target();">
</body>
</html>

<html>
<head>
 <title>Example of remote scripting in an IFRAME</title>
<script >
 function tosay(){
 	alert('this function is called from server.html');
 }
 function target(){
 	var ifrm = document.getElementsByName('passframe')[0];
 	ifrm = document.getElementById('passframe');
 	ifrm.src = 'server.html';
 }
</script>
</head>
<body>
<h1>Remote Scripting with an TFRAME </h1>
<iframe id="passframe" name="passframe" style="width:0px;height:0px;border:0px;" src="about:blank"></iframe>
<a href="javascript:target();">call the server</a>
<input type="button" value="button" src="server.html" οnclick="target();">
</body>
</html>

server.html代码如下:

Html代码

<html>
<head>
<title>the server</title>
</head>
<script>
//window.parent.tosay();
function init(){
alert("server page init");
parent.tosay();
}
</script>
<body onload="init();">
</body>
</html>

<html>
<head>
<title>the server</title>
</head>
<script>
//window.parent.tosay();
function init(){
    alert("server page init");
    parent.tosay();
}
</script>
<body οnlοad="init();">
</body>
</html>

例二,a.html代码:

Html代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>a.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script>
function changeDiv(){
var iframeObj = document.getElementById("workFrame");
iframeObj.src="b.html";
}
function changeFrom(){
document.formName.target="workFrame";
document.formName.submit();
}
</script>
</head>
<body>
<input type="button" name="" value="Change Div" onclick="changeDiv();">
<input type="button" name="" value="Form div" onclick="changeFrom();">
<a onclick="changeDiv();">changeDiv</a>
<DIV id="divId">
Main page Content
</DIV>
<Form id="formId" name="formName" action="b.html">
</Form>
<iframe id="workFrame" width="0" height="0" src=""></iframe>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>a.html</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">

		<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
		<script> 
			
			function changeDiv(){ 
				var iframeObj = document.getElementById("workFrame"); 
				iframeObj.src="b.html"; 
			} 
			function changeFrom(){ 
				document.formName.target="workFrame"; 
				document.formName.submit(); 
			} 
</script>

	</head>

	<body>
		<input type="button" name="" value="Change Div" οnclick="changeDiv();">
		<input type="button" name="" value="Form div" οnclick="changeFrom();">
		<a οnclick="changeDiv();">changeDiv</a>
		<DIV id="divId">
			Main page Content
		</DIV>
		<Form id="formId" name="formName" action="b.html">

		</Form>
		<iframe id="workFrame" width="0" height="0" src=""></iframe>
	</body>
</html>

b.html代码:

Html代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>b.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script>
function init(){
try{
alert("page b");
var div = document.getElementById("divId");
var parentparent_div = parent.document.getElementById("divId");
if(div){
parent_div.innerHTML = div.innerHTML;
}
}catch(e){
alert(e);
}
}
</script>
</head>
<body onload="init();">
<DIV id="divId">
iframe page result content .
</DIV>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>b.html</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">

		<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
		<script> 
		function init(){
			try{ 
				alert("page b");
				var div = document.getElementById("divId"); 
				var parent_div = parent.document.getElementById("divId"); 
				if(div){ 
					parent_div.innerHTML = div.innerHTML; 
				}	
			}catch(e){
				alert(e);
			}
		}
</script> 
		
	</head>

	<body οnlοad="init();">
		<DIV id="divId">
			iframe page result content .
		</DIV>

	</body>
</html>

lzwldlzw

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iframe

关键字: ajax/javascript相关以前的项目中用到了Ajax,采用的是Ajaxanywhere和iframe实现的局部刷新,现在做的项目中也要用到Ajax,顺便想起了iframe的刷新,虽然iframe的刷新不是异步的,但效果也相当不错.在网上也看到许多帖子里也写到了,在这里写上两个例子,也算是总结了,但有的代码是网上的例子改的,因为有的有点问题我都改了过来,可以直接运行看
复制链接

扫一扫