`

div+ajax实现类似iframe功能

| 
阅读更多
function showAtRight(url)
{
	    sendRequest(url);
}
var request=false; 
	try 
	{ 
		request = new XMLHttpRequest(); 
	} 
	catch (trymicrosoft) 
	{ try 
		{ request = new ActiveXObject("Msxml2.XMLHTTP"); 
		} catch (othermicrosoft) 
		{ try { request = new ActiveXObject("Microsoft.XMLHTTP"); 
		} catch (failed) { 
				request = false; 
		    } 
	    } 
  } 
function sendRequest(url) {
	//alert(request);
    request.open("GET", url, true);
    alert(url);
    request.onreadystatechange = processResponse;
    request.send(null);  
}

function processResponse() {
    if (request.readyState == 4) { 
    	if (request.status == 200) { 
    	var response = request.responseText; 
    	 document.getElementById("content").innerHTML = response;     
    	} else if (request.status == 404) { 
    	alert("Requested URL is not found."); 
    	} else if (request.status == 403) { 
    	alert("Access denied."); 
    	} else 
    	alert("status is " + request.status); 
    	} 
}
...
...
<a href="#" onclick="showAtRight(‘folers/target.jsp’)"></>
...
...
<div id="content"></div>

利用div就可以实现左边点击右边显示的效果。
js获取网页的地址,是根据当前网页来相对获取的。

不会识别根目录、、

例如
myweb-|
      |-this.jsp
      |-show.jsp
      -folders- |
                |-target.jsp
在ajax里要访问页面,这时不能用/folers/target.jsp,因为他不会识别网站目录

另外需要注意的是,如果target里面有css和js,必须放在主页才起作用、、因为编译后的jsp为java的class文件,里面虽然有css格式(在firefox里css显示正常,js不能执行)
但这里是ajax返回的页面,这时不会执行js和css(可以在target.jsp里alert一下,可以发现,不会执行js的代码。所以返回页面的css和js没用)
如果单纯的两个页面之间include,子页面的css和js在子页面是可以执行的。
主页面也可以调用子页面的js。
但这时要考虑页面中js和渲染的先后顺序
例如有
main.jsp
<DIV><%@ include file="left.jsp"%></DIV>
<DIV>
<%@ include file="right.jsp"%>
</DIV>

想在right.jsp里显示left中连接的内容。这时应该把css和js放在main.jsp中
不能使用 doucment.getElementById('content').innerHTML='<%@ include file="">'的方式。。
原因请看
http://holdbelief.iteye.com/blog/312500
分享到:
评论

相关推荐

    div+js模拟iframe实现左右框架.rar

    `iframe`的一个优点是可以动态加载内容,但我们可以使用`JavaScript`的`AJAX`(异步JavaScript和XML)或现代的Fetch API来实现相同的功能,甚至可以添加更多交互性。例如,点击链接时,不刷新整个页面,而是仅更新`...

    bootstarp+iframe 实现局部刷新 后台模板

    在后台模板中,`iframe`通常被用来承载各个功能模块,如数据管理、设置等,这样当用户在不同模块间切换时,只需要加载`iframe`内的内容,而不是整个页面,实现了局部刷新的效果。 选项卡功能是另一种提高用户交互性...

    用DIV仿iframe框架布局效果

    在网页设计中,有时我们可能需要实现类似iframe的框架布局效果,但又不希望引入额外的HTML标签,比如iframe,因为它们可能会带来加载性能问题或者与某些浏览器的兼容性问题。在这种情况下,我们可以利用CSS和...

    php+ajax实现图片文件上传功能实例

    在本文中,我们将探讨如何使用PHP和AJAX技术实现图片文件的异步上传。异步文件上传是一种在不刷新整个页面的情况下,使用户能够上传文件的技术,提供了更好的用户体验。常见的异步上传方式包括使用iframe、AJAX以及...

    使用jQuery和ajax代替iframe的方法(详解)

    传统上,iframe是实现这一功能的常用方法之一。然而,由于iframe存在一些局限性,比如不利于SEO优化、在响应式设计中的兼容性问题等,开发者们开始寻找更好的替代方案。jQuery和ajax技术的结合,提供了一种更为高效...

    Div iFrame 做的面向对象小窗口

    - 利用AJAX获取或更新 `iFrame` 中的内容,实现动态加载。 5. **应用示例**: - 评论模块:`iFrame` 可以用于加载第三方评论系统,`Div` 作为评论框的容器,提供交互功能。 - 弹窗广告:利用 `Div` 控制广告的...

    漂亮div展示图片,ajax,iframe,html内容highslide-3.3.22.zip

    Highslide JS是一个强大的JavaScript库,主要用于在网页上优雅地展示图片、HTML内容、Ajax响应以及通过iframe嵌入的外部页面。版本3.3.22是这个库的一个具体发行版,它提供了许多JBox和Thickbox等其他弹出插件不具备...

    jQuery+Ajax用户登录功能的实现

    其中大致流程是用户点击页面右上角的登录链接接着弹出div模拟窗口,该窗口通过iframe调用Login.aspx页面,用户输入用户名 密码和验证码后,Login.aspx页面的jQuery代码post到Login.ashx页面处理,Login.ashx页面...

    java+jsp实现web聊天系统

    1. 用户界面:使用JSP创建一个简单的网页,包含输入框(用于输入消息)和一个div或iframe(用于显示聊天历史)。 2. 发送消息:用户输入消息后,点击发送按钮,这将触发一个AJAX请求,向服务器发送消息内容。 3. ...

    使用iframe实现点击导航无刷新切换页面

    这种技术可以借助`iframe`(Inline Frame)元素来实现。`iframe`允许我们在一个HTML文档中嵌入另一个HTML文档,从而实现页面内容的动态切换,而不会打断用户的操作流程。 **一、iframe的基本使用** `&lt;iframe&gt;`标签...

    jquery 跨iframe拖拽

    总结,"jquery 跨iframe拖拽"是利用jQuery和jQuery UI的拖拽功能,结合跨IFrame通信技术,实现元素在不同IFrame之间的动态交互。虽然涉及的技术点较多,但正确理解和运用这些工具,可以为用户带来更丰富的交互体验。

    jquery树形菜单+iframe显示实例

    实现这个功能的关键步骤包括: 1. **构建树形菜单**:使用HTML和CSS创建基础的树形菜单结构,然后用jQuery添加交互性。例如,使用`.addClass()`和`.removeClass()`方法来切换展开/折叠的状态,使用`.html()`或`....

    div嵌套html不用iframe

    在网页设计和开发中,有时候我们需要在不使用`...通过以上步骤和知识点,我们可以在不使用`iframe`的情况下,利用`div`和jQuery实现页面内容的嵌套,这不仅可以提高网页性能,还能更好地控制和定制页面的显示效果。

    Ajax实现无刷新树

    ### Ajax实现无刷新树知识点详解 #### 一、Ajax技术概览 Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使得...

    jquery横排页签Tab+iframe代码示例

    在实际应用中,你可能还需要考虑更多的功能,如添加Ajax动态加载内容、实现滑动切换效果、添加禁用状态的页签等。这些功能可以通过扩展以上代码并结合jQuery库中的其他方法来实现。记住,jQuery只是一个工具,关键...

    asp.net 打印 指定div的内容,并清空清空页眉页角

    总结起来,实现ASP.NET中打印指定div内容并清除页眉页脚的功能,主要是通过JavaScript操作DOM,创建隐藏iframe,将div内容复制到iframe,设置适当的CSS以隐藏默认的打印页眉和页脚,然后调用`window.print()`方法...

    原生ajax和iframe框架实现图片文件上传的两种方式

    大家应该可以举出几种常用的异步文件上传功能的实现方式,使用频率较多的有原生ajax和iframe框架,实现图片文件上传,下面就为大家分享图片文件上传的两种方式:原生ajax和iframe框架,供大家参考,具体内容如下 ...

    使用jquery+iframe做一个ajax上传效果(实例)

    在本文中,我们将深入探讨如何使用jQuery和iframe技术来实现一个AJAX文件上传的效果。这种方法在处理文件上传时尤其有用,因为传统的AJAX不支持文件的POST操作。通过结合jQuery和iframe,我们可以创建一个无刷新的...

    frameset与div布局的优缺点

    2.使用RSH框架实现Ajax系统中的客户端状态保存和模拟浏览器的后退前进功能。 在选择前端布局时,DIV布局方式是一种更加明智的选择,它可以弥补掉Frameset布局的一些局限和缺点,并且也可以使用其他手段完成Frameset...

Global site tag (gtag.js) - Google Analytics