我的的iframe框架共切割了3份,导航栏title加左导航left加右显示main的样式。
这样的话主要显示是在main中,但是点击left 和main中的按钮需要在main中跳转页面,并且title导航栏中有个搜索框,中间的数据也要提交到后台并且提交后的数据要在main中展示。
在左导航栏中写js方法
<script language="javascript">
function toModule(moduleName){
top.main.location.href =moduleName;
}
</script>
在左侧的按钮上增加点击事件,出发这个方法,这样点击左侧的按钮时,可以根据自定义的moduleName发起请求,可以在后台接受并处理。处理后的结果是在main中展示的。这里只是点击跳转,如果有表单提交的话这样就不适用了,因为只会跳转页面,表单提交的数据并不会传入后台,导致数据为null;
我在title上有个搜索框,是个form提交,想将数据提交到后台,并且处理完毕后还是在main中展示。这下这个方法就不管用了。他只会跳转页面,form提交的数据是接收不到了,其实这个时候根本就没有提交。写了个submit试了一下,提交了,后台也能接收到了但是显示并没有在main中,怎么办呢。
这时候需要使用iframe的target属性来控制了,写了如下方法,在提交按钮增加点击事件即可。
function toData{
document.forms[0].target = "main"; //需要显示在哪里,iframe的name;
document.forms[0].action = "url";//提交的地址
document.forms[0].submit();//提交
}
这样就解决了iframe之间数据互通,跳转后在指定页面展示的问题了。