以前的项目中用到了Ajax,采用的是Ajaxanywhere和iframe实现的局部刷新,现在做的项目中也要用到Ajax,顺便想起了iframe的刷新,虽然iframe的刷新不是异步的,但效果也相当不错.在网上也看到许多帖子里也写到了,在这里写上两个例子,也算是总结了,但有的代码是网上的例子改的,因为有的有点问题我都改了过来,可以直接运行看到效果的.
例一iframe.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>
server.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>
例二,a.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" 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>
b.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 onload="init();">
<DIV id="divId">
iframe page result content .
</DIV>
</body>
</html>
分享到：
相关推荐
在后台模板中，`iframe`通常被用来承载各个功能模块，如数据管理、设置等，这样当用户在不同模块间切换时，只需要加载`iframe`内的内容，而不是整个页面，实现了局部刷新的效果。 选项卡功能是另一种提高用户交互性...
### 使用隐藏的Iframe实现Ajax无刷新上传 在Web开发中，实现文件的无刷新上传是一种常见的需求。本文将详细介绍如何通过使用隐藏的Iframe来实现这一功能，并结合所提供的代码片段进行具体分析。 #### 一、原理概述...
"iframe实现无刷新上传下载"是一个利用IFrame和JQuery技术来创建的项目，它允许用户在不刷新整个页面的情况下进行文件的上传和下载操作，提高了交互效率，同时也保持了页面状态的连续性。 首先，我们要理解什么是...
本案例主要探讨如何基于AdminLTE（一个基于Bootstrap的开源后台主题）利用iframe和JavaScript实现局部刷新功能，以提升用户体验。 AdminLTE是一个免费的响应式后台模板，其设计灵感来源于Twitter的Bootstrap框架，...
这里的JavaScript函数`changeIframe`接收一个参数，即要加载的页面URL，并将其赋值给`iframe`的`src`属性，从而实现在导航栏点击时无刷新切换内容。 **三、Bootstrap导航栏的响应式设计** Bootstrap的导航栏是响应...
在网页设计和开发中，`iframe`（Inline Frame）标签是一种强大的工具，它允许我们将一个网页嵌入到另一个网页中，实现部分内容的独立加载和刷新，从而提高用户体验。`iframe`广泛应用于网站后台、模块化内容展示、...
然而，我们可以利用IFRAME（Inline Frame）来模拟实现AJAX式的无刷新文件上传，以达到类似的效果。 首先，我们需要理解AJAX的工作原理。AJAX允许我们在后台与服务器进行通信，更新部分网页内容，而无需刷新整个页面...
【Ajax、Iframe与JSP实现无刷新文件上传】 在Web开发中，用户常常期望能够进行文件上传而无需页面整体刷新，以提供更好的用户体验。Ajax（异步JavaScript和XML）结合Iframe技术可以实现这样的功能。Ajax允许在后台...
标题中的"ajax_XML_iframe无刷新异步读取 源代码"指的是使用Ajax技术和XML以及IFrame实现的无刷新异步数据读取技术。在Web开发中，这种技术能够提高用户体验，因为用户无需等待整个页面刷新即可获取或更新数据。 ...
本主题聚焦于利用`iframe`来实现这一功能，这在不支持现代Ajax技术的旧版浏览器或者需要处理跨域请求时特别有用。 `iframe`，全称Inline Frame，是一种在HTML文档中嵌入另一个HTML文档的元素。通过设置`iframe`的`...
总结，实现"ajax无刷新上传图片"，关键在于利用Ajax的异步特性结合IFrame规避文件上传限制，通过JavaScript控制前端交互，服务器端处理文件存储，最后通过Ajax更新页面状态，提供流畅的用户体验。在开发过程中，需要...
Ajax 实现无刷新树是一种网页开发技术，它允许在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这种技术提高了用户体验，因为它减少了页面加载时间，使得用户能够更流畅地浏览和交互。以下是对...
本文将深入探讨如何使用IFrame来实现AJAX的文件上传功能，这在某些场景下是必要的，比如处理IE浏览器的兼容性问题或者上传大文件时。 首先，让我们理解为什么需要IFrame来处理文件上传。传统的AJAX文件上传在现代...
通过深入理解这些知识点，并结合提供的"Iframe模拟Ajax-经典"压缩包中的代码示例和文档，你可以更有效地掌握如何在面临同源策略限制时，使用Iframe来模拟Ajax请求，实现跨域数据交互。这将有助于你在开发过程中解决...
在实际项目中，我们可以基于这个示例进行扩展，比如添加Ajax技术来实现无刷新加载，提高用户体验；或者引入JavaScript框架如jQuery或Vue.js来更高效地处理DOM操作和事件监听；还可以考虑使用现代前端框架，如React或...
动态创建上传表单并通过iframe模拟Ajax实现无刷新上传是一项前端技术，主要用于在用户界面上无需重新加载整个页面的情况下，向服务器提交文件等数据。这种方法的优点在于提高了用户体验，避免了页面刷新带来的延时和...
7. **iframe局部刷新**：虽然在当前案例中没有直接提到，但有时也可以使用iframe来实现局部刷新。将需要刷新的部分放在一个iframe内，然后改变iframe的src属性即可。 通过以上步骤，你可以实现在AdminLTE和...