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

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

yuyutoo 2024-10-24 17:48 13 浏览 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跨域的场景还是非常多的，在整个前端的职业生涯中肯定会遇到！如果不了解以上解决问题的手段，遇到这类问题就会很恼人，希望看完这篇文章的读者都能完全掌握。

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

相关推荐

YAML配置文件简介及使用（yaml 配置）

简介YAML是"YAMLAin'taMarkupLanguage"（YAML不是一种标记语言）的缩写。相比JSON格式的方便。...

教你如何解决最常见的58种网络故障排除方法

1.故障现象：网络适配器（网卡）设置与计算机资源有冲突。分析、排除：通过调整网卡资源中的IRQ和I/O值来避开与计算机其它资源的冲突。有些情况还需要通过设置主板的跳线来调整与其它资源的冲突。2.故障现...

一分钟带你了解服务器网卡（服务器网卡怎么用）

今天小编和大家聊一下服务器的网卡。什么是网卡？简单说网卡就是计算机与局域网互连的设备。计算机主要通过网卡接入网络。网卡又称为网络适配器或网络接口卡NIC（NetworkinterfaceCard）...

linux文件之ssh配置文件的含义与作用

ssh远程登录命令是操作系统(包括linux和window系统)下常用的操作命令，可以帮助用户，远程登录服务器系统，查看，操作系统相关信息。linux系统对于ssh命令有专门保存其相关配置的目录和文件...

Cilium 官方文档翻译 - IPAM(二)Kubernetes Host模式

KubernetesHostScopeciliumIPAM的kuberneteshost-scope模式通过选项ipam:kubernetes开启，将集群IP地址分配委托给每个独立的节点，并...

域名劫持跳转，域名劫持跳转的解决办法只需5步

简单来说，域名劫持就是把原本准备访问某网站的用户，在不知不觉中，劫持到仿冒的网站上，例如用户准备访问某家知名品牌的网上商店，黑客就可以通过域名劫持的手段，把其带到假的网上商店，同时收集用户的ID信息和...

Linux基本命令（linux基本命令总结）

...

Linux 磁盘和文件系统管理（linux磁盘管理fdisk）

1检测并确认新硬盘...

windows host文件怎么恢复?局域网访问全靠这些!

windowshost文件怎么恢复？windowshost文件是常用网址域名及其相应IP地址建立一个关联文件，通过这个host文件配置域名和IP的映射关系，以提高域名解析的速度，方便局域网用户使用...

Nginx配置文件详解与优化建议（nginx 配置详解）

1、概述今天来详解一下Nginx的配置文件，以及给出一些配置建议，希望能对大家有所帮助。...

Mac电脑hosts文件锁定，如何修改hosts文件权限

有时候我们需要修改hosts文件，但是网上很多教程都行不通，使用sudo命令也不行。其实有一个很简单的方法。打开终端命令行，使用如下命令即可：sudochflags-hvnoschg/etc/...

windows电脑如何修改hosts文件?（windows 修改hosts文件）

先来简单说下电脑host的作用hosts文件的作用：hosts文件是一个用于储存计算机网络中各节点信息的计算机文件；作用是将一些常用的网址域名与其对应的IP地址建立一个关联“数据库”，当用户在浏览器中...

Vigilante恶意软件行为怪异:修改Hosts文件以阻止受害者访问盗版网站

Sophos刚刚报道了一款名叫Vigilante的恶意软件，但其行为却让许多受害者感到不解。与其它专注于偷密码、搞破坏、或勒索赎金的恶意软件不同，Vigilante会通过修改Hosts文件...

hosts文件无法修改几种现象和解决方法

第一种、hosts文件修改完不是直接保存而是弹出另存为窗口解决：1、右击hosts文件——属性——把“只读”前面勾去掉。第二种、打开hosts文件时提示“你没有权限打开该文件，请向文件的所有者或管理员...

hosts文件位置在哪里,教你hosts文件位置在哪里

Hosts是一个没有扩展名的系统文件，其基本作用就是将一些常用的网址域名与其对应的IP地址建立一个关联"数据库",当用户在浏览器中输入一个需要登录的网址时，系统会首先自动从Hosts文件中寻找对应的I...

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

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