ajax和iframe的使用遇到的问题 -

837062099

浏览: 112652 次
性别:
来自: 南京

最近访客更多访客>>

victor036

zfn4444

zhoubg

ucasren

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

ajax和iframe的使用遇到的问题

博客分类：

javascript
html
j2ee
ajax
iframe

ajax html javascript java web

在公司做的不是web软件，一直想自己学习并锻炼自己。
这几天有空就写自己的一个web小系统，感觉第一次写的界面太丑了，就打算这次用ajax提高用户体验，在网上当了一个页面后就打算用一个页面做一个系统。
通过四五天的努力，写了一个模块，貌似没发现功能上的问题。然后突然想看看用户session过期时提交一个请求时能不能完成老版本的功能，原来功能如下：提交请求后发现没登录，会先跳转到用户登录页面，然后成功登陆后自动执行之前没执行的请求，和淘宝网的实现一样。结果竟然不行。关键代码如下：

<%
	String contextPath = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ contextPath + "/";

	RedirectBean bean = (RedirectBean) request.getAttribute("redirectBean");
	String method = "POST";
	String requestName = "homePage.action";
	if (bean != null) {
		method = ComUtil.changeNullVal(bean.getRequestWay(),method);
		requestName = ComUtil.changeNullVal(bean.getRequest(),requestName);
	}
%>

<head>
<base href="<%=basePath%>"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RedirectPage</title>
</head>
<!-- <body onload="document.getElementById('autoform').submit();"> -->
<body>
		<form id="autoform" action="<%=requestName %>" method="<%=method%>" target="_top">
			跳转中....
		<%
			if (bean != null) {
				Iterator<SimpleEntry> it = bean.iterator();
				while (it.hasNext()) {
					SimpleEntry en = it.next();
		%>
		<input type="hidden" name="<%=en.getName()%>" value="<%=en.getValue()%>" />
		<%
			}
			}
		%>
	</form>
	<script type="text/javascript">
		document.getElementById('autoform').submit();
	</script>
	</body>

这时一个跳转页面，自动提交表单跳转，这段代码会被之前的ajax请求接收到，然后

<div id="target"></div>

写到主框架页面的这个div标签中，这个时候应该是自动提交表单的，但是竟然没有跳转！！！然后我发现这个语句

<body onload="document.getElementById('autoform').submit();">

是不是和主框架页面的某些东西冲突了，onload事件不起作用。果然如此，神奇的javascript，我突然感觉onload事件没什么用，因为我在页面底部如下方法代替就可以执行脚本了，

<script type="text/javascript">
		document.getElementById('autoform').submit();
	</script>

效果和onload是一样的，页面也约等于load完成了。
这个时候果然可以正常的提交了，登录后一切正常。
下面更蛋疼的事情发生了:点击导航栏的链接后从发现chrome的debug工具中看见一次就重复提交几十次请求。并且还在翻倍上升，好久都找不到原因，然后回忆起所有请求都用ajax，搞得javascript写的很恶心，肯定是js重复冲突造成的。于是
决定放弃改用iframe结合ajax。
以前从来没用过iframe，一下子就考虑到了上面提到的问题，又被恶心到了，我一直在想上面那个跳转页面被返回在iframe中后，要如何跳出iframe来提交请求，那样才能使整个框架页面返回登录页面，否则仅仅iframe中是个登录页面，就错了。于是乎又恶心了，用javascript搞，最后把返回的页面拿到了iframe外面，这回总可以把整个页面跳转回登录页了吧。
奶奶的问题又出现了，主页面和这个跳转页面之间有冲突，尼玛啊，伤不起，最后想到target元素，因为之前一直以为只有超链接标签可以target，尼玛，原来form竟然也有target，哎，这不就简单了吗，

target="_top"

，OK,这样这个跳转页面在iframe里提交，就不会和主框架页面冲突了，而且还能跳出iframe提交，也使整个框架页面都返回登录页面。

iframe解决了我原本几个页面(ajax返回的页面)组合成一个页面时冲突的问题，还可以部分代替ajax，非常不错。

ps:
补充点target的属性:
<form>和超链接<a>都有target属性。

有 4 个保留的目标名称用作特殊的文档重定向操作：
_blank
浏览器总在一个新打开、未命名的窗口中载入目标文档。
_self
这个目标的值对所有没有指定目标的 <a> 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 <base> 标签中的 target 属性一起使用。
_parent
这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。
_top
这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

当然target还可以是窗口(比如弹出窗口)或者框架(frameset、iframe等)，如：
<a href="http://www.baidu.com" target="myHidFrame">click1</a>
<iframe name="myHidFrame" src = "" frameborder="0"scrolling='auto'></iframe>
百度页面就会出现在iframe中。
参考:http://wangzjie.iteye.com/blog/628204

分享到：