背景
随着业务的发展，自然地会有一些公共的业务被抽离成为公共组件共各个项目使用。但是由于各个项目用到的技术栈都有所不同，所以这个公共组件就不能方便地被引用了。为解决这个问题，我们把这个组件写成了单独的页面挂到一个域名下，其他项目采用iframe或者webview的方式去加载这个页面，从而实现功能的简单复用。
不过这过程中也产生了很多问题，单是跨域就会出现好几次了。以下我将会介绍我遇到的跨域问题以及一些解决方法。
为什么会跨域
为了保证用户信息的安全，95年的时候Netscape公司引进了同源策略，里面的同源指的是三个相同：协议、域名、端口。
违反了同源策略就会出现跨域问题，主要表现为以
【详解iframe跨域的几种常用方法(小结)】
在互联网业务不断发展的背景下，为了实现代码的复用和提升效率，公共组件的构建变得尤为重要。然而，由于各项目技术栈的差异，直接引用这些组件可能会遇到困难。为了解决这个问题，我们会将组件封装成独立的页面，部署在一个特定的域名下，然后通过`iframe`或`webview`在不同的项目中加载这些页面，从而达到功能复用的目的。然而，这样的做法会引发跨域问题，限制了页面间的数据交互和控制。
**跨域的由来**
跨域问题源于浏览器的同源策略，这是1995年由Netscape公司引入的一项安全机制，旨在保护用户信息的安全。同源策略要求网页的协议、域名和端口必须完全一致，否则就会被视为不同源，导致在JavaScript中执行某些操作时出现跨域限制。主要表现如下：
1. **无法读取其他源的cookie、localStorage和indexDB**，这些数据存储通常与特定源相关联。
2. **DOM操作受限**，不能访问和修改不同源的页面元素。
3. **Ajax请求受阻**，XMLHttpRequest和Fetch API的请求会被浏览器阻止。
**解决跨域的方法**
1. **设置`document.domain`**
当主域名相同，子域名不同时，可以通过设置`document.domain`来消除跨域问题。例如，`a.demo.com`和`b.demo.com`页面中的`iframe`，可以在各自页面中设置`document.domain = 'demo.com'`。这样，`iframe`内的页面可以访问父页面的方法，如在`b`页面中调用`window.parent.toggleFullScreen()`。需要注意的是，`document.domain`只能设置为当前域名的上一级或与其一致的值。
2. **使用中间页面**
如果主域名和子域名都不同，可以创建一个与主页面同域名的中间页面（如`c.demo.com`）。`iframe`加载中间页面，中间页面再调用主页面的方法。例如，`c`页面可以通过`window.onload`事件调用`a`页面的全屏方法，因为`c`和`a`在同一域内，不受同源策略限制。
3. **利用`window.postMessage`**
`window.postMessage`是浏览器提供的一个安全的跨域通信方式。它允许一个窗口向其他窗口发送消息，无论这些窗口是否同源。例如，在`b`页面中，可以使用`parent.postMessage(value, "http://a.demo.com")`发送信息，而`a`页面通过监听`message`事件来接收并处理信息，确保只有来自正确源的消息才会被执行。这样，即使源不同，也可以实现页面间的通信。
**总结**
通过设置`document.domain`、使用中间页面或`window.postMessage`方法，我们可以有效地解决`iframe`跨域的问题，实现不同源页面之间的数据传递和交互。在实际应用中，应根据具体场景选择合适的方法，同时注意安全，防止恶意的跨域攻击。对于更复杂的跨域场景，还可以考虑使用CORS（跨源资源共享）或JSONP等技术。理解并掌握这些方法，能够帮助我们在开发过程中更好地应对跨域挑战，提高项目的灵活性和可维护性。
