首页
学习
活动
专区
工具
TVP
发布

JS应用】Iframe 解决

有些都是很普通很常见的知识,但是为了巩固自己的知识面,梳理自己的知识树,所以每个知识点都会写成文章,所有文章都会放在公众号右下角的前端进阶课程总结中~~~也希望能够帮助到需要的人~~ 的东西, 简直不要接触太多...,网上相关内容一抓一大把,但是突然学习到一个关于前端解决的方式 就是 利用 iframe 不管你有没有了解过,反正我没有 我觉得很有用并且容易忘,所以我记录下来哈哈哈 下面会分三块内容进行描述...1、基本原理 2、简单模拟 2、封装的函数 3、封装函数实战 解决场景 现在我们在 a.com 的域名下有一个页面 我们要请求 b.com 下的一个接口,很明显是会的,无法直接请求 今天我们使用 iframe...来解决这个问题 基本原理 1、需要三个页面 两个同(a.com)的 页面,一个和接口同的 页面(b.com) 其中一个页面是父页面,也就是真正的内容页,展示数据的 另外两个作为子页面,是辅助父页面请求数据用的...A 的方法 getData,并且把数据传过去 parent.getData(window.name) 没错,这就完成了 iframe 解决的问题,但是实际上并不会这么做,肯定是封装得更加适用一些

13.9K10
您找到你想要的搜索结果了吗?
是的
没有找到

关于iframe传输

至于我为什么想写这篇文章是因为最近在项目中使用到了iframe,是的。生无可恋的又写上了一点js,可能是因为前端的人对单点登录啥的或者是页面跳转以及要和后端的逻辑 处理起来不是很熟练吧。...参考了一些博客,至于使用 不使用iframe,我觉得能解决问题就好,而且如果考虑的多的话就考虑以后扩展以及拆分啥的,毕竟前端又不像后端这样。 因为要解决问题。.../iframePage.html" id='iframe'> <!...元素,当然也可以使用其他的js框架 iFrame = document.getElementById('iframe') //iframe加载完毕后再发送消息,否则子页面接收不到message iFrame.onload...我们知道postMessage是挂载在window对象上的,所以等iframe加载完毕后,用iFrame.contentWindow获取到iframe的window对象, 然后调用postMessage

54110

深入剖析iframe问题

HTML5学堂:本文当中我们介绍了的基本知识,讲解到了的相关种类,并讲解了解决域中的一种方法——如何使用iframe。...讲解了iframe的基本原理与流程,并配以实战~ 利利的独白:,是我们的课程中必不可少的一部分,但是我们一直都是在讲解JSONP的方式,虽然也提到了iframe方式,但是由于时间因素,...本文仅仅讲明了iframe问题,想了解更多关于iframe标签的基本知识,直接发送 “iframe标签” 到 “HTML5学堂” 的微信。...能够解决什么类型的相同,不同子之间的请求 例如:http://www.h5course.com/与http://baobao.h5course.com/ iframe实现的基本原理与流程...src地址要书写的是B的b.html(也就是我们时需要调用的文件)。

13.6K40

IE中iframe访问

1      什么叫?        指在A系统(第一方)中通过URL直接调用B系统(第三方),并且两个系统分别部署在不同的内,简单的理解就是访问这两个系统需要不同的IP。...2      会引发什么问题?        ...在IE中,A系统中的iframe或者frame访问了B系统一个资源时,IE浏览器默认设置是禁用第三方Cookie的,这就导致向B系统发送请求时丢失了JSESSIONID,从而B系统服务器中就无法得到...IE中如此处理可能也是出于安全考虑,经测试,在Chrome、FireFox中默认是允许第三方Cookie的,也就不会存在引发的问题。这种的情况通常出现在多个系统间互相嵌入某些功能。...3.2.2  P3P协议        在B系统中允许被访问的功能模块中加入P3P响应头,response.setHeader("P3P","CP=CAOPSA OUR");,记住是B系统中加,不是

4.1K00

学员投稿 | iframe 解决

,网上相关内容一抓一大把,但是突然学习到一个关于前端解决的方式 就是 利用 iframe  不管你有没有了解过,反正我没有 我觉得很有用并且容易忘,所以我记录下来哈哈哈 下面会分三块内容进行描述...1、基本原理 2、简单模拟 2、封装的函数 3、封装函数实战 解决场景 现在我们在 a.com 的域名下有一个页面 我们要请求 b.com 下的一个接口,很明显是会的,无法直接请求 今天我们使用 iframe... 来解决这个问题 基本原理 1、需要三个页面 两个同(a.com)的页面,一个和接口同的页面(b.com) 其中一个页面是父页面,也就是真正的内容页,展示数据的 另外两个作为子页面,是辅助父页面请求数据用的...)         没错,这就完成了 iframe 解决的问题,但是实际上并不会这么做,肯定是封装得更加适用一些 详情就看下面吧 封装函数 经过上面的说明,我们首先要明确我们的目的...的确存在能耗高,安全问题...很多小伙伴嫌弃它,但是它毕竟是解决问题的一种思路,面试可能会问哦,多掌握点总是没错的。

2.3K30

iframe应用 - 使用iframe提交表单数据

之前我们提到了iframe,今天我们在原有的基础之上进行“实例”的讲解。通过iframe实现表单数据的提交。...如果想了解iframe,可以发送“iframe”到“HTML5学堂”公众号。 为何提交数据还要?...在使用iframe之前,可能你的脑海中就出现了这样一个问题:为何提交表单数据还需要呢?...构建基本的结构样式 2 引入需要依赖的JS文件 3 定义动态创建iframe标签的功能函数 4 获取表单数据并序列化、加密处理 5 通过AJAX发送请求,完成 代码书写位置 我们依旧在A当中进行代码书写...标签”的功能函数 JS代码如下(对于这个步骤中的详细介绍,我们之前的文章中已经做了详细的解释,想要了解的可以发送“iframe”到“HTML5学堂”公众号) var iframeJquery = null

5.2K50

iframe+postMessage实现通信

需要在本页面跳转到一个图片管理系统上传图片,上传成功后返回图片链接,然后返回管理系统,显示图片 实现思路: 上传图片时,需要在本窗口跳转到图片管理系统,并且两个系统之间要通信 考虑到两个系统是不同的端口号,存在问题...,结合window.postMessage()实现通信 项目背景 该管理系统基于React.js搭建,在此简称为A页面,地址为http://www.blogoog.com:8000 图片管理系统基于...Vue.js搭建,在此简称为B页面,地址为http://www.blogoog.com:8088 具体实现 参考资料 iframe-MDN:https://developer.mozilla.org/zh-CN...在页面内嵌入iframe页面的情况下,需要等到页面内的iframe页面,也就是B页面加载完成之后,才能进行postMessage通信 event.origin中的origin不能保证是该窗口的当前origin...始终是你需要通信的目标窗口 A页面中:A页面向B页面发送信息,window就是在A页面中嵌入的iframe指向的B页面的window,即:iframe.contentWindow B页面中:B页面想

5.2K40

vue前端怎么解决问题_前端调用js方法解决方案

1.什么是? 当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为。...这里主要场景是iframe的情况,不同域名的iframe是限制互相访问的。 XMLHttpRequest同源策略:禁止使用XHR对象向不同源的服务器地址发起HTTP请求。么去解决?...2.解决的三种方法 1. JSONP JSONP 包含两部分: 回调函数和数据。...回调函数是当响应到来时要放在当前页面被调用的函数 数据就是传入回调函数中的json数据,也就是回调函数的参数了 原理: 是用script标签的src属性向后台发起接口请求,把返回来的值作为一个js处理...(以springBoot为例) @Configuration public class CorsConfig { // 当前请求最大有效时长。

2.4K20

分析Silverlight调用

分析Silverlight调用 在silverlight开发的过程中不免要遇到的问题,在这里以调用Webservice为例子来分析一下的问题。...输入用户名,调用 再看看没有找到xml的情况 好了在看看网上我搜索到的一些说法。 “出于安全考虑,FlashPlayer默认的安全设置是不允许进行操作的。...即便是同一个网站,如果用不同的方式访问,也会被FlashPlayer认为是操作。 为解决Flash/Flex系统中的问题,提出了crossdomain.xml策略文件。...有了它,就可以解决问题。”...“SilverLight要实现访问,必须在服务端被访问的直接域名下,配置 clientaccesspolicy.xml( 或 crossdomain.xml)文件,即可以访问 http://{domainName

90680

详解使用postMessage解决iframe通信问题

第一时间想到的就是用iframe了,但问题来了,我和第三方web项目是有交互的,这就违反同源策略了,处理问题是最让人头疼的事之一。...在window对象下有个postMessage方法,是专门用来解决通信问题的。...关于postMessage的详细介绍请戳这里,不过MDN的文档太详细了,导致有些同学看完还是一脸懵逼,下面我们就来看看怎么用postMessage实现iframe通信,当你会用了之后再回去看文档,感觉是完全不同的...是无法通信,因为它们是不同源的(假设存在问题),这时候就要用到postMessage了。...','*'); } 我们知道postMessage是挂载在window对象上的,所以等iframe加载完毕后,用iFrame.contentWindow获取到iframe的window对象,然后调用

3.3K20

Javascript实现简单调用

1、一个众所周知的问题,Ajax直接请求普通文件存在无权限访问的问题,甭管你是静态页面、动态网页、web服务、WCF,只要是请求,一律不准; 2、不过我们又发现,Web页面上调用js文件时则不受是否的影响...(不仅如此,我们还发现凡是拥有"src"这个属性的标签都拥有的能力,比如、、); 3、于是可以判断,当前阶段如果想通过纯web端(ActiveX控件、服务端代理...、属于未来的HTML5之Websocket等方式不算)访问数据就只有一种可能,那就是在远程服务器上设法把数据装进js格式的文件里,供客户端调用和进一步处理; 4、恰巧我们已经知道有一种叫做JSON...来调用服务器上动态生成的js格式文件(一般以JSON为后缀),显而易见,服务器之所以要动态生成JSON文件,目的就在于把客户端需要的数据装入进去。...throws ServletException, IOException { doGet(request, response); } } 这样我们就就完成了一个最简单的调用

1.5K90

利用iframe和location.hash实现

假设域名a.com下的文件cs1.html要和cnblogs.com域名下的cs2.html传递信息,cs1.html首先创建自动创建一个隐藏的iframeiframe的src指向cnblogs.com...cs2.html响应请求后再将通过修改cs1.html的hash值来传递数据(由于两个页面不在同一个下IE、Chrome不允许修改parent.location.hash的值,所以要借助于a.com域名下的一个代理...iframe;Firefox可以修改)。...iframe var ifrproxy = document.createElement('iframe'); ifrproxy.style.display = 'none...parent.parent.location.hash = self.location.hash.substring(1); 当然这样做也存在很多缺点,诸如数据直接暴露在了url中,数据容量和类型都有限等…… 原帖地址:JavaScript总结与解决办法

79220
领券