通用版解决跨域问题,父页面获取iframe里面的内容 |
您所在的位置:网站首页 › 如何获取iframe中的内容 › 通用版解决跨域问题,父页面获取iframe里面的内容 |
父页面获取iframe里面内容的解决方案如下:
实验如下:开两个服务器,一个端口9000,一个端口9001 现在在9000页面要放一个iframe指向9001的一个页面,再在9000父页面打印9001iframe里面的东西是访问不了的,提示跨域了,端口不一样
现在的目标:父页面127.0.0.1:9000访问自己iframe src=127.0.0.1:9001里面的内容 解决这个问题的方案的思路: 1、在127.0.0.1:9000页面使用js代码动态增加一个iframe其src指向与127.0.0.1:9001同级目录下的一个页面execB.html 2、然后先去9001创建好这个页面execB.html,并确保能访问到。 3、在127.0.0.1:9001/execB.html中,去做想做的js操作(如调用127.0.0.1:9001中的一个js函数,或者改变背景色等都在这个页面进行)
原理解释:9000页面现在有两个iframe,一个访问9001,一个是动态增加的访问9001/execB.html,9000加载完后返回9001的….标签,此时,9001/execB.html也返回了,但是9001/execB.html里面有操作9001的DOM的js代码如:parent.window.frames[“myframe9000”].document.getElementById(“test”).innerHTML,这样就相当于9001/execB.html再操作9001里面的DOM,就能够操作成功 具体代码如下: 127.0.0.1:9000 html代码:
js代码: window.onload=function (ev) { function exec_iframe(){ if(typeof(exec_obj)=='undefined'){ exec_obj = document.createElement('iframe'); exec_obj.name = 'tmp_frame'; exec_obj.src = 'http://127.0.0.1:9001/execB'; exec_obj.style.display = 'none'; document.body.appendChild(exec_obj);//动态创建一个iframe }else{ exec_obj.src = 'http://127.0.0.1:9001/execB?' + Math.random(); } } exec_iframe() }
127.0.0.1 :9001 html代码(目标id=notebook里面的内容被获取,被显示,颜色更改): Title test9001这个页面放到iframe里面,目标获取这里的内容就算成功 目标获取这里的内容就算成功
127.0.0.1:9001/execB.html(真正做取值的js页面,被动态添加到9000页面iframe) js代码(去操作同一个域名下的127.0.0.1:9001的内容获取id=notebook里面的内容): Title //jquery操作方式,变个颜色 // $('#notebook', window.parent.myframe.document).css("backgroundColor","red") //js的操作方式,变个颜色 parent.window.frames["myframe"].document.getElementById("notebook").style.backgroundColor = "green"; var temp = parent.window.frames["myframe"].document.getElementById("notebook").innerHRML;//取值 console.log(temp)至此,跨域访问成功~ |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |