开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

iframe跨域调用js方法

基础概念

iframe 是 HTML 中的一个元素，用于在当前网页中嵌入另一个 HTML 文档。跨域调用指的是在不同的域名、协议或端口之间进行通信。由于浏览器的同源策略（Same-Origin Policy），默认情况下，不同源的 iframe 之间是无法直接访问彼此的 JavaScript 对象和方法的。

相关优势

安全性：同源策略防止了恶意网站通过 iframe 访问其他网站的数据。
隔离性：不同源的 iframe 内容相互隔离，避免了潜在的冲突。

类型与应用场景

类型

简单请求：通过 window.postMessage 进行跨域通信。
服务器中转：通过服务器作为中介，转发请求和响应。

应用场景

嵌入第三方内容：如地图服务、社交媒体插件等。
微前端架构：多个独立的应用组合成一个整体应用。
跨域数据共享：需要在不同域之间共享数据或调用方法。

遇到的问题及原因

问题：尝试在 iframe 中调用跨域的 JavaScript 方法时，会遇到安全错误。

原因：

浏览器的同源策略阻止了跨域访问。
直接通过 iframe.contentWindow 或 iframe.contentDocument 访问跨域内容会抛出错误。

解决方法

使用 `window.postMessage`

window.postMessage 是一种安全的跨域通信方式，允许不同源的窗口之间传递消息。

示例代码：

父页面（parent.html）：

<!DOCTYPE html>
<html>
<head>
    <title>Parent Page</title>
</head>
<body>
    <iframe id="myIframe" src="https://example.com/child.html"></iframe>
    <script>
        window.addEventListener('message', function(event) {
            // 验证消息来源
            if (event.origin !== 'https://example.com') return;
            console.log('Received message:', event.data);
        });

        function sendMessageToIframe() {
            var iframe = document.getElementById('myIframe');
            iframe.contentWindow.postMessage('Hello from parent!', 'https://example.com');
        }
    </script>
    <button onclick="sendMessageToIframe()">Send Message to Iframe</button>
</body>
</html>

子页面（child.html）：

<!DOCTYPE html>
<html>
<head>
    <title>Child Page</title>
</head>
<body>
    <script>
        window.addEventListener('message', function(event) {
            // 验证消息来源
            if (event.origin !== 'https://parentdomain.com') return;
            console.log('Received message:', event.data);

            // 发送响应消息
            event.source.postMessage('Hello from iframe!', event.origin);
        });
    </script>
</body>
</html>

注意事项

安全性：始终验证消息的来源（event.origin），以防止安全漏洞。
兼容性：window.postMessage 在现代浏览器中得到广泛支持，但在使用时仍需注意兼容性问题。

通过这种方式，可以在不同源的 iframe 之间实现安全的通信，避免了直接跨域访问带来的安全风险。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

iframe跨域调用js_ajax跨域访问

iframe跨域访问 js跨域是个讨论很多的话题.iframe跨域访问也被研究的很透了. 一般分两种情况: 一....: @Action(value = “outerLogin”, results = { @Result(na … js iframe跨域访问 1.什么是跨域?...2.前台解决跨域几种方法 2.1 动态创建script 2.2 使用document.domain 2.3使用HTML5新属性postMessage 2.4 利用iframe和loc … IFrame跨域访问自定义高度...JS跨域访问问题描述:应用A访问应用B的资源,由于A,B应用分别部署在不同应用服务器(tomcat)上,属 … IFrame跨域访问&;&;IFrame跨域访问自定义高度...1.IFrame跨域访问: http://blog.csdn.net/fdipzone/article/details/17619673 2.IFrame跨域访问自定义高度: 由于JS禁止跨域访问,如

10.9K2 0

【JS应用】Iframe 解决跨域

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

15.4K1 1

iframe跨域安全

1.响应头X-Frame-Options 响应头X-Frame-Options是用来给浏览器指示允许一个页面可否在，iframe>，中展现的标记。...这有助于防止跨站点脚本攻击（XSS）。...支持的指令 frame-ancestors uri1 uri2 允许一个页面可否在，iframe>，，，或中展现。...add_header Content-Security-Policy "frame-ancestors http://www.a.com http://www.b.com"; 兼容性 IE浏览器不支持 3.子域名跨域...document.domain = "a.com"; site2.a.com document.domain = "a.com" 将不同子域名的站点document.domain设置为相同的基础域名，则可实现跨域访问

5.9K2 0

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

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

2.5K2 0

关于iframe跨域传输

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

2.5K1 0

深入剖析iframe跨域问题

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

14.6K4 1

解决postMessage跨域、跨iframe消息传递

页面中有子iframe页面 , 当子iframe接收到消息 , 比如websocket传递过来的消息时希望能通知到父级页面可以使用windows.postMessage传递消息 , 两个参数 ,第一个是数据...,第二个是跨域时指定的目的域向父级页面传递消息 , 跨域部分是 * , 表示所有域名 window.parent.postMessage(redata,"*"); 父级页面监听消息 window.addEventListener

3.1K2 1

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.2K0 0

学员投稿 | iframe 解决跨域

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

2.5K3 0

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

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

5.3K5 0

使用 WebSocket 实现跨域 iframe 通信

宫崎骏风-罗罗诺亚·索隆前言本文是使用 WebSocket 实现跨域 iframe 通信思路实现了一个本地 Demo，功能有：iframe 页面之间互相通信嵌套的 iframe 通信WebSocket...图片体积不能超过20M，静态图附上页面布局整体运行效果都是在本地运行的，启动了3个前端服务页面，分别是 8090,8091,8092屏幕主页面是8090服务运行的，有两个卡片区可以向其他两个页面进行通信页面中使用iframe...id="iframe1" src="http://localhost:8091">iframe> iframe id...="iframe2" src="http://localhost:8092">iframe> 在页面初始化后进行 WebSocket 进行连接，然后使用 onmessage...) ws.send(JSON.stringify({ sender: 8090, msg: data, receiver: 8092 }));};iframe

2991 0

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.3K4 0

【HTML】iframe跨域访问问题

概述本地同一浏览器访问本地HTML文件和访问服务器端HTML文件，本地Iframe没有自适应高度，而服务器端的Ifrane自适应了高度。...本地访问的HTML文件Iframe没有根据Iframe里面的页面类容自适应高度 2.Iframe自适应高度代码在index.html文件中间中添加Iframe页面,页面加载时，加载src指定的文件路径...iframe id="indexFrame" name="index" width="800" onload='iFrameHeight("indexFrame")' src="Web/Index/...> JS脚本自适应调整Iframe高度 function...在这里，我猜测是访问本地文件是file协议（file:///）,HTML代码和JS代码存在跨域问题。小弟对file协议不熟悉，请大家不吝赐教。

4.7K8 0

puppeteer 无法获取跨域iframe内容解决

puppeteer访问的页面存在跨域iframe时，会存在无法获取iframe内容的问题。...解决方法，puppeteer加上启动参数 args: [ '--disable-web-security', '--disable-features=IsolateOrigins

4.8K2 1

跨域IFRAME 安全的数据交互方案

场景概述：站点A页面通过IFRAME嵌套站点B页面，A页面需要从B页面获取数据站点B页面推送数据： parent.window.postMessage(data, "http://sitea"); 站点

2.2K3 0

mb增加关闭iframe跨域检查功能

document.getElementById("login_frame"); console.log('haha2:' + dom.contentWindow); 这种方式访问子frame，存在跨域问题...Transition v8::internal::Runtime_BinaryOpIC_Miss 会去取Symbol.toPrimitive，关键就是这个Object::GetProperty，会调用

1.6K2 0

ajax实现跨域_js跨域请求的三种方法

一、跨域的概念跨域大家都知道，不同地址，不同端口，不同级别，不同协议都会构成跨域。例如：about.haorooms.com和www.haorooms.com都会构成跨域。...://www.haorooms.com/b.js 不同域名不允许二、解决跨域的方案上一篇文章，我写了window.postMessage，是一种跨域的解决方案。...CORS跨域资源共享众所周知，我们之前跨域很多时候用的是jsonp的方式，jsonp的方式我后面介绍。...通过修改document.domain来跨子域我们只需要在跨域的两个页面中设置document.domain就可以了。修改document.domain的方法只适用于不同子域的框架间的交互。...使用HTML5的window.postMessage方法跨域发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/172557.html原文链接：https://javaforall.cn

2.9K5 0

分析Silverlight跨域调用

分析Silverlight跨域调用在silverlight开发的过程中不免要遇到跨域的问题，在这里以跨域调用Webservice为例子来分析一下跨域的问题。...我的webservice里有一个方法 [WebMethod] public string SayHello(string name) { return "Hello " + name; } webservice...输入用户名，调用再看看没有找到xml的情况好了在看看网上我搜索到的一些说法。 “出于安全考虑，FlashPlayer默认的安全设置是不允许进行跨域操作的。...即便是同一个网站，如果用不同的方式访问，也会被FlashPlayer认为是跨域操作。为解决Flash/Flex系统中的跨域问题，提出了crossdomain.xml跨域策略文件。...有了它，就可以解决跨域问题。”

9688 0

vue.js跨域_vueaxios跨域请求

最近公司能的项目使用前后端分离,前端开发请求接口数据的时候碰到了跨域问题,解决方案如下一、SimpleCORSFilter工具类在项目Util类中新建类SimpleCORSFilter 实现Filter...true : false; System.out.println(isCrossStr); } } 二、web.xml处理跨域请求 <filter-name

3.9K2 0

解决跨域的三种方法_js跨域解决方案

遇到前端跨域访问问题，类似于这样的：在Springboot项目里加上这个配置文件CorsConfig.java，重启之后即可实现跨域访问，前端无需再配置跨域。...; import org.springframework.web.filter.CorsFilter; @Configuration public class CorsConfig { // 当前跨域请求最大有效时长...corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头 corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法...corsConfiguration.setMaxAge(MAX_AGE); source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置

1.6K5 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭