工作中遇到的js跨域问题总结
起因:之前在做一个项目的时候有这样一个问题,127.0.0.1域名上的一个页面A.html,需要访问127.0.0.2域名上B.html页面中的一个方法。这就涉及到JS跨域访问了,通过查阅资料,得以解决,现总结一下。
具体问题:在A.html页面有一个下载按钮,当点击下载的时候,要访问B.html页面的方法,然后下载资源,苦苦寻找,终得良方。
良方如下:
第一步 在A.html页面里面创建一个 iframe ,
//导出按钮
$("#导出").click(function () { exec_iframe() }); //跨域访问execB.html页面
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.2:8001"+'/execB.html';
exec_obj.style.display = 'none';
document.body.appendChild(exec_obj);
} else {
exec_obj.src = "http://127.0.0.2:8001"+'/execB.html';
}
}
<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域下的页面,两个页面的内容如下
<!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 iframe function </title>
</head> <body>
<script type="text/javascript">
parent.window.myframe.downFile(); // execute parent myframe fIframe function
</script>
</body>
</html>
B.html
function downFile() { 下载 }
如此一来,便可解决,闲的没事,写写博客!!!
工作中遇到的js跨域问题总结的更多相关文章
- js中ajax如何解决跨域请求
js中ajax如何解决跨域请求,在讲这个问题之前先解释几个名词 1.跨域请求 所有的浏览器都是同源策略,这个策略能保证页面脚本资源和cookie安全 ,浏览器隔离了来自不同源的请求,防上跨域不安全的操 ...
- 前端Js跨域方法汇总—剪不断,理还乱,是跨域
1.通过jsonp跨域2.通过修改document.domain来跨子域(iframe)3.隐藏的iframe+window.name跨域4.iframe+跨文档消息传递(XDM)5.跨域资源共享 C ...
- js跨域请求数据的3种常用的方法
由于js同源策略的影响,当在某一域名下请求其他域名,或者同一域名,不同端口下的url时,就会变成不被允许的跨域请求.那这个时候通常怎么解决呢,对此菜鸟光头我稍作了整理:1.JavaScript 在 ...
- js跨域请求方式 ---- JSONP原理解析
这篇文章主要介绍了js跨域请求的5中解决方式的相关资料,需要的朋友可以参考下 跨域请求数据解决方案主要有如下解决方法: 1 2 3 4 5 JSONP方式 表单POST方式 服务器代理 H ...
- 5种处理js跨域问题方法汇总(转载)
1.JSONP跨域GET请求 ajax请求,dataType为jsonp.这种形式需要请求在服务端调整为返回callback([json-object])的形式.如果服务端返回的是普通json对象.那 ...
- JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- 【js跨域】js实现跨域访问的几种方式
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- 【前端】【转】JS跨域问题总结
详情见原博客:详解js跨域问题 概念:只要协议.域名.端口有任何一个不同,都被当作是不同的域. 跨域资源共享(CORS) CORS(Cross-Origin Resource Sharing)跨域资源 ...
- 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 ...
随机推荐
- Linux vi & bash使用笔记
f 1.vi入门级命令 打开或新建 vi filename 有三种模式,刚开始进去的是一般模式,在一般模式下按 I 之后进入编辑模式 ,按Esc进入命令模式 在命令模式下按 :wq 保存退出 多个窗口 ...
- STL中的vector 和list
参考书目:visual c++ 入门经典 第七版 Ivor Horton著 第十章 认识两个容器:vector和list 容器:是STL(Standard Template Library 标准模板库 ...
- NanUI | NanUI 0.7 正式发布
2020年2月10日 NanUI 0.7版正式发布. 回顾过去的一年,浑浑噩噩.生活上.工作上太多的压力和变数让我身心疲惫,目睹亲人被病痛的摧残的痛苦,无法释怀的生死别离令我沉沦许久:公司业务的变动, ...
- Node.js实战--资源压缩与zlib模块
Blog:<NodeJS模块研究 - zlib> Github:https://github.com/dongyuanxin/blog nodejs 的 zlib 模块提供了资源压缩功能. ...
- excel 2010 如何设置日期选择器
excel 中想输入很多的日期.如果每个日期都直接手动输入太过于繁琐,而且容易出错.想制作一个日期选择器,直接鼠标点选就可以了. 效果如下: 具体实现参考 http://wenku.baidu.com ...
- 形象解释各种卷积算法(Convolution animations)
No padding, no strides Arbitrary padding, no strides Half padding, no strides Full padding, no strid ...
- CCF_ 201409-3_字符串匹配
水. #include<cstdio> #include<iostream> #include<cstring> using namespace std; int ...
- vue 过渡 & 动画
过渡 & 动画 过渡动画 用css先定义好动画效果 .a-enter-active, .a-leave-active { transition: all 1.5s; } .a-enter, . ...
- (转载)Linux平台下安装 python 模块包
https://blog.csdn.net/aiwangtingyun/article/details/79121145 一.安装Python Windows平台下: 进入Python官网下载页面下载 ...
- 能否不同udp socket绑定到同一IP地址和port
http://www.softlab.ntua.gr/facilities/documentation/unix/unix-socket-faq/unix-socket-faq-4.html http ...