按你说的意思,功能本身是可以实现的,但不是使用 location.reload ,而且是有前提条件的。
浏览器为了安全起见,是不能操作地址不同源的 iframe 标签里的内容的,只能对同源地址的iframe进行操作,什么是同源,如果你不了解,请先搜索一下”同源策略“,简单来说就是 iframe 标签所引入的页面,必须跟你的 主页面是同一个网站中的页面。
如果你上面的效果满足上述前提,也就是 iframe 中引入的页面跟主页面都是你自己写的,而且是同一个网站,那么实现的大概思路是这样的:
1, 点击主页面的查询,将数据显示在 iframe 页面里。
就是在主页面中发起查询请求,然后在iframe 页面中显示查询结果。这里需要js配合,有两种实现方式,一是通过地址栏传递参数,另一种是直接用 js 硬写入 iframe 页面中。 如果是通过地址栏传递参数,在点击主页面的查询之后,在js中使用 iframe.src = '.....html?key1=vaue1&key2=value2' 的方式传递给 iframe 页面,然后 iframe 页面中也需要用 js 来处理传递过来的参数,采用 location.search 来获取传递过来的所有参数,然后进行分割处理;如果是直接硬写入 iframe 页面中,则需要获取到 iframe 页面中相应的标签,获取当前页面中的某个元素,是用 document.get... 之类的方法,这里的 document 就是指当前页面的文档对象,那么获取 iframe ,当然得通过 iframe 页面的文档对象,获取iframe页面文档对象的方法是 iframe.contentWindow.document (iframe指的是 iframe标签,需要先用js获取到这个标签),获取到指定标签之后,就跟操作当前页面一样写数据了。
2,从iframe 子页面中返回数据到主页面中显示,这个跟上面第一步是一样的,也有两种实现思路,也是地址栏传递参数或者硬写,但因为地址栏传参会刷新页面,用户体验不好,所以还是采用硬写入的方式。 主页面写数据到iframe标签,需要先获取标签,反过来也是一样的,iframe页面中写数据到主页面,同样需要先获取到主页面中的标签,获取原理相通,先要找到主页面的文档对象,这里需要清楚整体的页面结构,主页面与 iframe 页面是直接的父子级关系,还是多层嵌套关系?如果是直接的父子关系,那就是 window.parent.contentWindow.document, 如果主页面是最顶层,那就是 window.top.contentWindow.document 。
1、建立父级页面,首先建立一个父级页面parent.html,代码如图,一个pop函数方法,一个链接到child.html的iframe标签;
2、建立子页面,再新建一个child.html页面,如图,展示一个id=link的div标签,和link的点击事件,因为是调用父级方法,所以需要用到window.parent.pop()方法。
3、预览页面,预览页面,可明显看到parent.html里面的iframe框架,指向的就是child子页面
4、错误提示,点击页面中“调用父级pop方法”的文字链,会提示错误,这是因为没配置好域名等相关设置。
5、站点配置,打开iis,右键iframe文件夹——“管理文件夹”——“浏览”;即可打开本地测试地址;(如小伙伴没配置iis,需要先配置iis建立站点)
6、成功调用父级方法,再次点击“调用父级pop方法”的文字链,即可成功弹出提示。
如果你引用了jquery的话,可以使用浏览器本地缓存比如:你要存一个name="asd123",age=18到浏览器
第一个页面的js
localStorage.setItem("name","asd123")
localStorage.setItem("age","18")
后面的页面的js
var name = localStorage.getItem("name")
var age= localStorage.getItem("age")
相当于把两个字符串分别存在浏览器中你设置的两个变量name、age中,然后取出来