一、如果高层域名相同的话，可以通过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 跨域调用父级方法的方案的更多相关文章

  1. 子页面iframe跨域执行父页面定义的JS方法

    问题需求:父页面与子页面iframe跨域嵌套,子页面要触发父页面所定义的js方法.父子页面的数据传递. 下文中会用到一些文件:父页面: parent.html嵌在父页面的子iframe页面:child ...

  2. 跨域调用接口的方法之一：$.ajaxSetup()

    跨域查询接口的数据,之前在公司时有发生过,产生的原因是,本地请求的域名或IP地址不一致,解除方法,也是修改域名和IP地址.比如: 接口中的数据来自IP地址:192.168.1.23/get.php 如 ...

  3. 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页面 ...

  4. layer.open打开iframe页面的调用父页面方法及关闭

    //调用父类方法 window.parent.exportData($('#shownum').val(),$('#splitstr').val()); //关闭iframe页面var index = ...

  5. jquery Ajax跨域调用WebServices方法

    由于公司需要开发一个手机页面,想提供给同事直接在手机上可以查询SAP资料.数据需要使用js调用webserver来获取. 因为初次使用Jquery调用Webserver,所以期间并不顺利.测试调用We ...

  6. Flutter子组件调用父组件方法修改父组件参数

    子组件调用父级组件方法的主要实现是父组件给子组件传入一个方法,然后在子组件中调用父级方法来修改父级的参数.看一下效果图 父级组件实现 在父级组件中写一个_editParentText的方法来修改组件中 ...

  7. 谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法，跨域调用JS不再是难题！

    谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法 导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个 ...

  8. JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  9. IFrame跨域处理方法-Javascript

    在漫长的前端开发旅途上,无可避免的会接触到ajax,而且一般情况下都是用在同一域下的ajax请求:但是如果请求是发生在不同的域下,请求就无法执行,并且会抛出异常提示不允许跨域请求,目前我没有找到明确的 ...

随机推荐

  1. Vim编辑器入门

    vim(vimsual)是Linux/UNIX系列OS中通用的全屏编辑器. vim分为两种状态,即命令状态和编辑状态,在命令状态下,所键入的字符系统均作命令来处理,如:q代表退出,而编辑状态则是用来编 ...

  2. 安装了nodejs后在命令行运行npm报错：Error: Cannot find module 'internal/util/types'

    报错如下图所示: 解决方法:删除目录“C:\Users\wls\AppData\Roaming\npm\node_modules”下的npm文件夹

  3. Spring Boot项目Maven Build报错的解决方法

    问题1, [ERROR]Failed to execute goal org.apache.maven.plugins:maven-surefire-plugin:2.21.0:test (defau ...

  4. s4-介质访问控制子层-1 MAC子层

    数据链路层被分成了两个子层:MAC和LLC MAC子层要解决什么问题? 介质访问控制(Madia Access Control) 数据通信方式 单播(unicast):One - to - One ...

  5. hashchange事件

    h5新增了hashchange事件,以便在URL参数列表(及URL中‘#’号后面的所有字符串),发生变化时通知开发人员. 之所以要添加这个事件,是因为在Ajax应用中,开发人员经常要利用URL参数列表 ...

  6. oracle死锁解决方法

    select SESS.sid, SESS.SERIAL#, LO.ORACLE_USERNAME, LO.OS_USER_NAME,      AO.OBJECT_NAME, LO.LOCKED_M ...

  7. HTTP请求模型和头信息参考

    发送HTTP请求:一个请求由四个部分组成:请求行.请求头标.空行和请求数据 请求行 请求行由三个标记组成:请求方法.请求URI和HTTP版本,它们用空格分隔.例如:GET /index.html HT ...

  8. spring boot和mybatis入门

    [size=x-large]昨天讲了一下spring boot的入门操作相信老手已经明白入门的操作,今天我来讲下我自己的心得,可能与官方有一定差异:希望对大家能有用 一:开门见山首先看工程结构 这里的 ...

  9. Mongoose轻松搞定MongoDB，不要回调！

    MEAN开发栈中使用MongoDB的时候,与之配对的ORM最好的选择就是Mongoose了.本文就和大家一起探讨一下如何使用Mongoose来实现MongoDB的增删改查. 为了能使文中的例子更加生动 ...

  10. Effective C++ 第二版 31)局部对象引用和函数内new的指针 32)推迟变量定义

    条款31 千万不要返回局部对象的引用, 不要返回函数内部用new初始化的指针的引用 第一种情况: 返回局部对象的引用; 局部对象--仅仅是局部的, 在定义时创建, 在离开生命空间时被销毁; 所谓生命空 ...