iframe 跨域调用父级方法的方案
一、如果高层域名相同的话,可以通过document.domain来实现跨域访问
例如:
父级域名:localhost:8080
子级域名:localhost:9090
那么可以设置document.domain = 'localhost' 来实现跨域访问
二、如果域名没有相同之处
先来做一个假设:假如
我现在有两个系统,一个是工作流服务平台,其中一个功能就是“代办”;
另一个是OA系统,现在我要在OA系统中直接嵌入工作流服务平台的代办页面,而代办页面的中,点击处理又会打开OA系统提供的审批页面,审批页面中有个按钮“同意”;
工作流程服务平台的代办页面为 db.html,OA系统提供的审批页面为 sp.html,当在sp.html中点击“同意”按钮后,要求代办页面更新数据。
1.工作流服务平台需要的代码:(假设域名为localhost:9090)
db.html: (子页面是sp.html)
- <html>
- <script>
- function refresh(){
- document.getElementById('data').innerHTML = '2222';
- }
- </script>
- <body>
- <div id="data">111</div>
- </body>
- </html>
execRefresh.html: (这是实现跨域的关键)
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8">
- <title> exec main function </title>
- </head>
- <body>
- <script type="text/javascript">
- parent.parent.refresh(); // execute main function
- </script>
- </body>
- </html>
2.OA系统需要的代码:(假设域名为 127.0.0.1:9090)
sp.html(是db.html的子页面)
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8">
- <title> iframe window </title>
- <script type="text/javascript">
- // exec main function
- function exec_main(){
- if(typeof(exec_obj)=='undefined'){
- exec_obj = document.createElement('iframe');
- exec_obj.name = 'tmp_frame';
- exec_obj.src = 'http://localhost:9090/zz/execRefresh.html';
- exec_obj.style.display = 'none';
- document.body.appendChild(exec_obj);
- }else{
- exec_obj.src = 'http://localhost:9090/zz/execRefresh.html?' + Math.random();
- }
- }
- </script>
- </head>
- <body>
- <p>B.html iframe</p>
- <p><input type="button" value="同意" onclick="exec_main()"></p>
- </body>
- </html>
注:请重点注意红色字体
iframe 跨域调用父级方法的方案的更多相关文章
- 子页面iframe跨域执行父页面定义的JS方法
问题需求:父页面与子页面iframe跨域嵌套,子页面要触发父页面所定义的js方法.父子页面的数据传递. 下文中会用到一些文件:父页面: parent.html嵌在父页面的子iframe页面:child ...
- 跨域调用接口的方法之一:$.ajaxSetup()
跨域查询接口的数据,之前在公司时有发生过,产生的原因是,本地请求的域名或IP地址不一致,解除方法,也是修改域名和IP地址.比如: 接口中的数据来自IP地址:192.168.1.23/get.php 如 ...
- Js跨域、父级窗口执行JS赋值、取值,更改元素
网站域名: A:http://www.xxoo.com/a.html B:http://www.aabb.com/b.html B网站嵌套与A网站(A的a中的Iframe指向B中的b)b要让父级a页面 ...
- layer.open打开iframe页面的调用父页面方法及关闭
//调用父类方法 window.parent.exportData($('#shownum').val(),$('#splitstr').val()); //关闭iframe页面var index = ...
- jquery Ajax跨域调用WebServices方法
由于公司需要开发一个手机页面,想提供给同事直接在手机上可以查询SAP资料.数据需要使用js调用webserver来获取. 因为初次使用Jquery调用Webserver,所以期间并不顺利.测试调用We ...
- Flutter子组件调用父组件方法修改父组件参数
子组件调用父级组件方法的主要实现是父组件给子组件传入一个方法,然后在子组件中调用父级方法来修改父级的参数.看一下效果图 父级组件实现 在父级组件中写一个_editParentText的方法来修改组件中 ...
- 谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法,跨域调用JS不再是难题!
谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法 导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个 ...
- JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- IFrame跨域处理方法-Javascript
在漫长的前端开发旅途上,无可避免的会接触到ajax,而且一般情况下都是用在同一域下的ajax请求:但是如果请求是发生在不同的域下,请求就无法执行,并且会抛出异常提示不允许跨域请求,目前我没有找到明确的 ...
随机推荐
- python 基础1
一.python版本的介绍 python有两个大的版本2.X与3.X的版本,而在不久的将来将全面的进入3的版本.3的版本将比2的版本功能更加强大,而且也修复了大量的bug. 二.python的安装可以 ...
- 微信小程序之弹框modal
官方文档 <modal hidden="{{hidden}}" title="这里是title" confirm-text="自定义确定按钮&q ...
- C++ dynamic_cast 的使用
C++中的dynamic_cast 执行运行时刻类型转换,起作用有点类似于Java当中的instance of reference:http://www.cnblogs.com/chio/archiv ...
- 自定义消息的操作方法ON_MESSAGE(..)
- 手机开发-Android
Android 语言.JAVA 开发环境.一是JDKjava开发工具包,二是eclipse开发工具IDE,三是Android SDK安卓软件开发包,四是ADT Android开发工具把JDK和Andr ...
- Alpha阶段敏捷冲刺(五)
1.站立式会议 提供当天站立式会议照片一张 2.每个人的工作 (有work item 的ID),并将其记录在码云项目管理中: 昨天已完成的工作. 祁泽文:实现了个人遗忘曲线图 徐璐琳:完成了微信Web ...
- 23种设计模式(1)-Facade设计模式
前记 曾经我遇见的一个需求是这样的,接口A有个方法void methodA(),类B需要实现接口A的methodA()方法,并且在类B中需要把methodA()方法内部处理逻辑获得的结果利用C类实例的 ...
- 对工程测量大师App的评价
我是测绘工程专业的学生,去年由于同学的推荐我开始使用工程测量大师这款App. 工程测量大师是一款非常方便的测量计算软件,用户将测量的数据输入后,软件就可以帮助你得到精确的计算结果.操作非常简单,使用起 ...
- Android 响应menu,back键,点击外部消失
点击外部消失,只需要设置popupWindow.setBackgroundDrawable(new PaintDrawable()); 设置 popupWindow.setFocusable(true ...
- browsersync
以后不需要F5了 之前实现自动刷新,是通过livereload,它需要插件比较麻烦:现在改为browsersync. BrowserSync,迅捷从免F5开始 完整选项 不止是自动刷新:默认就有 UI ...