起因：之前在做一个项目的时候有这样一个问题，127.0.0.1域名上的一个页面A.html，需要访问127.0.0.2域名上B.html页面中的一个方法。这就涉及到JS跨域访问了，通过查阅资料，得以解决，现总结一下。

具体问题：在A.html页面有一个下载按钮，当点击下载的时候，要访问B.html页面的方法,然后下载资源，苦苦寻找，终得良方。

良方如下：

第一步  在A.html页面里面创建一个  iframe   ，

  1.    //导出按钮
  2.     $("#导出").click(function () {
  3.  
  4.         exec_iframe()
  5.  
  6.     });
  7.  
  8.     //跨域访问execB.html页面
  9.     function exec_iframe() {
  10.         if (typeof (exec_obj) == 'undefined') {
  11.             exec_obj = document.createElement('iframe');
  12.             exec_obj.name = 'tmp_frame';
  13.             exec_obj.src = "http://127.0.0.2:8001"+'/execB.html';
  14.             exec_obj.style.display = 'none';
  15.             document.body.appendChild(exec_obj);
  16.         } else {
  17.             exec_obj.src = "http://127.0.0.2:8001"+'/execB.html';
  18.         }
  19.     }

　　

  1.    <iframe id="BpageId" name="myframe" src="http://127.0.0.2:8001/B.html" frameborder="0" scrolling="auto" style="width: 100%; height: 327px;"></iframe>

　第二步  创建B.html, execB.html页面，这两个页面都属于127.0.0.2:8001域下的页面，两个页面的内容如下

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.  <head>
  4.   <meta http-equiv="content-type" content="text/html; charset=utf-8">
  5.   <title> exec iframe function </title>
  6.  </head>
  7.  
  8.  <body>
  9. 	<script type="text/javascript">
  10. 	    parent.window.myframe.downFile(); // execute parent myframe fIframe function
  11. 	</script>
  12.  </body>
  13. </html>

　　

　　B.html

  1.  function downFile()
  2.  
  3.     {   下载  
  4.  
  5. }

　　

　　

　　如此一来，便可解决，闲的没事，写写博客！！！

工作中遇到的js跨域问题总结的更多相关文章

  1. js中ajax如何解决跨域请求

    js中ajax如何解决跨域请求,在讲这个问题之前先解释几个名词 1.跨域请求 所有的浏览器都是同源策略,这个策略能保证页面脚本资源和cookie安全 ,浏览器隔离了来自不同源的请求,防上跨域不安全的操 ...

  2. 前端Js跨域方法汇总—剪不断，理还乱，是跨域

    1.通过jsonp跨域2.通过修改document.domain来跨子域(iframe)3.隐藏的iframe+window.name跨域4.iframe+跨文档消息传递(XDM)5.跨域资源共享 C ...

  3. js跨域请求数据的3种常用的方法

    由于js同源策略的影响,当在某一域名下请求其他域名,或者同一域名,不同端口下的url时,就会变成不被允许的跨域请求.那这个时候通常怎么解决呢,对此菜鸟光头我稍作了整理:1.JavaScript   在 ...

  4. js跨域请求方式 ---- JSONP原理解析

    这篇文章主要介绍了js跨域请求的5中解决方式的相关资料,需要的朋友可以参考下     跨域请求数据解决方案主要有如下解决方法:   1 2 3 4 5 JSONP方式 表单POST方式 服务器代理 H ...

  5. 5种处理js跨域问题方法汇总（转载）

    1.JSONP跨域GET请求 ajax请求,dataType为jsonp.这种形式需要请求在服务端调整为返回callback([json-object])的形式.如果服务端返回的是普通json对象.那 ...

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

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

  7. 【js跨域】js实现跨域访问的几种方式

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

  8. 【前端】【转】JS跨域问题总结

    详情见原博客:详解js跨域问题 概念:只要协议.域名.端口有任何一个不同,都被当作是不同的域. 跨域资源共享(CORS) CORS(Cross-Origin Resource Sharing)跨域资源 ...

  9. js跨域访问，No 'Access-Control-Allow-Origin' header is present on the requested resource

    js跨域访问提示错误:XMLHttpRequest cannot load http://...... No 'Access-Control-Allow-Origin' header is prese ...

随机推荐

  1. SpringMVC进阶(二)

    一.高级参数绑定 1.1. 绑定数组 Controller方法中可以用String[]接收,或者pojo的String[]属性接收.两种方式任选其一即可. /** * 包装类型 绑定数组类型,可以使用 ...

  2. Vertx使用EventBus发送接受自定义对象

    先看官方文档步骤: 需要一个编解码器,看源码: 可见内置了需要数据类型的实现,所以发送其他消息可以发送,但是如果发送自定义对象就需要自己实现编解码逻辑了 一 自定义编解码器 /** * 自定义对象编解 ...

  3. 事务管理（ACID）

    目录 一.事务管理(ACID) 原子性(Atomicity) 一致性(Consistency) 持久性(Durability) 隔离性(Isolation) 二.事务隔离级别 脏读 不可复读 虚读(幻 ...

  4. SQL 两个时间段 不能重复语句

    DECLARE @BeginDate datetime; DECLARE @EndDate datetime; set @BeginDate='2015-03-2' set @EndDate='201 ...

  5. 【Nginx入门系列】第三章 通过端口号区分虚拟主机

    1.配置虚拟主机 (1)连接Nginx所在的服务器(我使用的是putty) (2)切换到nginx.conf 配置文件所在的目录,我目录是/usr/local/nginx/conf (3)增加一个虚拟 ...

  6. ROS和Gazebo进行机器人仿真（二）

    一.在Gazebo中使用ROS控制器 在本节中,我们将讨论如何在Gazebo中让机器人的每个关节运动. 为了让关节动起来,我们需要分配一个ROS控制器,尤其是,我们需要为每个关节连上一个与transm ...

  7. java设计模式5——适配器模式

    java设计模式5--适配器模式 1.结构型模式介绍 1.1.作用 从程序的结构上实现松耦合,从而可以扩大整体的类结构,用来解决更大的问题. 分类: 适配器模式 代理模式 桥接模式 装饰模式 组合模式 ...

  8. Codeforces_731_F

    http://codeforces.com/problemset/problem/731/F 其实是暴力枚举,但是有些小技巧,直接保存每个数的数量. 枚举每个起点时,然后依次加上起点大小的分段的数量的 ...

  9. MingGW Posix VS Win32 - 明瓜娃的毒因

    MinGW-posix和win32纠缠的瓜娃子 官方首席佛偈(SourceForge)的官网下载页 法克油啊,让我一个小白情何以堪. 盘TA wiki posix wiki中文-UNIX API标准 ...

  10. LeetCode 684. Redundant Connection 冗余连接(C++/Java)

    题目: In this problem, a tree is an undirected graph that is connected and has no cycles. The given in ...