百度360必应搜狗淘宝本站头条
vba高级教程svn连接scheduledtaskmybatis plus结构体数组
当前位置：网站首页 > 编程网 > 正文

这些iframe跨域解决方案你需要了解一下，以后不应该再是你的盲区

yuyutoo 2024-10-24 17:48 15 浏览 0 评论

今天我们聊一下前端中非常基础的一个知识点——iframe跨域。

作为一名前端，在业务中你可能会遇到这样一个场景：自己开发的页面中需要通过iframe嵌入别人的页面，比如passport页面（登录），但是常常因为跨域问题，导致父子页面无法通信，这时我们就要想办法如何在跨域的情况下解决这个问题。

什么是跨域？协议、域名、端口三者中只要有一个不一样就是跨域！

假设我们有以下场景：

父页面a通过iframe内嵌子页面b，两页面之间想互相获取dom等信息，该怎么办？

a页面地址：http://jerry.demo.com:8999/a.html
b页面地址：http://channel.demo.com:9999/b.html

如果父子页面直接操作对方，就会产生图3中的跨域报错！

document.domain

如果只是主域名不同，其他都相同，就可以采用这种方式。比如以上场景的情况，可以设置

document.domain = 'demo.com'；

location.hash

利用页面url的hash值解决。

a父页面可以将信息放到子页面url的hash值中，然后在子页面的内部监听hash值的变化。

这种实现方式可以让子页面拿到父页面的信息，但是如何让父页面拿到子页面的信息呢？

b页面改变a页面地址hash值，a页面监听地址栏的变化获取相应的数据，但是a、b页面不同源，b页面不能直接操作改变a页面地址的hash值。

于是b可以通过创建c页面（图6所示），让c和a同源，把值传给c，c来改变a的地址hash（图7所示），从而达到a、b的通信。

window.name

window.name是个特殊的值，无论是iframe内嵌的页面还是普通的页面都存在这个变量。它有一个神器的特点就是只要设置了这个值之后无论如何修改页面的地址（哪怕是跨域的地址），这个值都会一直存在。（跟着页面窗口存在而不是跟着地址存在）

父到子通信：

在a页面中先插入c，a和c同源，所以可以先在a页面中操作c页面的window.name，然后再把iframe的src指向b页面，b和c处于一个iframe窗口，这时window.name的值就可以在b页面中获取到！

子到父通信：

过程正好反过来，先插入b，b页面中修改window.name，然后再把iframe页面替换成c，因为a和c同源，所以a页面就能拿到window.name的值。

此处比较尴尬的是需要隐藏iframe。

window.postMessage

HTML5引入了跨文档通信 API，使用targetWidw.postMessage发送消息，window.onmessage监听接收消息。

使用时，这个API的兼容性需要考虑一下。

总结

iframe跨域的场景还是非常多的，在整个前端的职业生涯中肯定会遇到！如果不了解以上解决问题的手段，遇到这类问题就会很恼人，希望看完这篇文章的读者都能完全掌握。

喜欢我的文章就关注我吧，有问题可以发表评论，我们一起学习，共同成长！

相关推荐

深度解读Spring框架的核心原理

深度解读Spring框架的核心原理在Java开发的世界里，提到Spring框架，就像提起一位久经沙场的老将，它几乎成了企业级应用开发的代名词。那么，这个被无数开发者膜拜的框架究竟有何独特之处？今天，我...

「Spring认证」Spring 框架概述

Spring是最流行的企业Java应用程序开发框架。全球数以百万计的开发人员使用SpringFramework来创建高性能、易于测试和可重用的代码。Spring框架是一个开源的Java...

学习Spring框架 这一篇就够了

1.spring概述1.1Spring是什么（理解）...

Spring框架双核解析:IOC与AOP的本质与实战

#Spring核心#IOC容器#AOP编程#Java框架设计...

Spring Boot与传统Spring框架的对比:探索Java开发的新境界

SpringBoot与传统Spring框架的对比：探索Java开发的新境界在Java生态系统中，Spring框架无疑是一个里程碑式的存在。从最初的简单依赖注入容器，到如今覆盖企业级开发方方面面的庞大...

Spring MVC框架源码深度剖析:从入门到精通

SpringMVC框架源码深度剖析：从入门到精通SpringMVC框架简介SpringMVC作为Spring框架的一部分，为构建Web应用程序提供了强大且灵活的支持。它遵循MVC（Model-V...

Spring框架入门

一.spring是什么？Spring是分层...

程序员必知必会技能之Spring框架基础——面向切面编程!

面向切面编程AOP（AspectOrientedProgramming）与OOP（ObjectOrientedProgramming，面向对象编程）相辅相成。AOP提供了与OOP不同的抽象软件结...

Spring Security安全框架深度解读:为你的应用穿上“钢铁铠甲”

SpringSecurity安全框架深度解读：为你的应用穿上“钢铁铠甲”在现代网络世界里，保护我们的应用程序免受各种威胁攻击至关重要。而在这个过程中，SpringSecurity框架无疑是我们最可...

Spring框架的设计哲学与实现:打造轻量级的企业级Java应用

Spring框架的设计哲学与实现：打造轻量级的企业级Java应用Spring框架自2003年诞生以来，已成为企业级Java应用开发的代名词。它不仅仅是一个框架，更是一种设计理念和哲学的体现。本文将带你...

Spring框架深度解析:从核心原理到底层实现的全方位避坑指南

一、Spring框架核心概念解析1.控制反转（IoC）与依赖注入（DI）Spring的核心思想是通过IoC容器管理对象的生命周期和依赖关系。传统开发中，对象通过new主动创建依赖对象，导致高耦合；而S...

Java框架 —— Spring简介

简介一般来说，Spring指的是SpringFramework，它提供了很多功能，例如：控制反转（IOC）、依赖注入...

Spring 框架概述，模块划分

Spring框架以控制反转（InversionofControl，IoC）和面向切面编程（Aspect-OrientedProgramming，AOP）为核心，旨在简化企业级应用开发，使开发者...

spring框架怎么实现依赖注入?

依赖注入的作用就是在使用Spring框架创建对象时，动态的将其所依赖的对象注入到Bean组件中，其实现方式通常有两种，一种是属性setter方法注入，另一种是构造方法注入。具体介绍如下：●属性set...

Spring框架详解

　　Spring是一种开放源码框架，旨在解决企业应用程序开发的复杂性。一个主要优点就是它的分层体系结构，层次结构让你可以选择要用的组件，同时也为J2EE应用程序开发提供了集成框架。　　Spring特征...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表