Iframe----在前后端不分离的项目中使用，造福人类，在网页中嵌入其他内容的强大工具

一颗奶橙子

已于 2024-01-24 15:34:01 修改

阅读量1.7k

点赞数 24

文章标签：前端 javascript

于 2024-01-24 15:33:23 首次发布

本文链接：https://blog.csdn.net/weixin_42013974/article/details/135820096

版权

在现代网页开发中，有许多技术可以让我们更好地展示内容、实现交互和提供丰富的用户体验。其中一个强大的工具就是Iframe（内联框架）。Iframe允许我们在网页中嵌入其他网页或内容，为开发人员提供了更大的灵活性和功能性。本文将介绍Iframe的基本概念、用途和一些注意事项。

什么是Iframe？

Iframe是HTML中的一个元素，可用于在当前页面中嵌入另一个独立的HTML文档。它像一个窗口，可以显示来自同一域名或其他域名的网页或内容。通过Iframe，我们可以将其他网页嵌入到我们的页面中，就像在页面中创建了一个小的“窗口”来展示额外的内容。

Iframe的用途

嵌入其他网页内容：Iframe最常见的用途之一是在一个网页中嵌入其他网页。这对于集成第三方服务、引入外部内容或显示其他页面的一部分非常有用。
实现跨域通信：由于Iframe创建了一个独立的浏览上下文，可以通过Iframe进行跨域通信。这对于与嵌入的页面进行数据交互或实现单点登录等功能非常有帮助。
安全的隔离环境：Iframe提供了一种安全的隔离环境，可以将来自不同域名的内容隔离开来。这有助于防止恶意脚本攻击（XSS）和保护用户的隐私。
嵌入第三方内容：Iframe可以用于嵌入来自第三方服务提供商的内容，例如地图、视频、社交媒体插件等。这样，我们可以轻松地集成这些功能到我们的网页中，丰富用户体验

Iframe的跨越通信

window.postMessage()方法：window.postMessage() 是一种安全的跨域通信方式，允许在不同的窗口或Iframe之间传递消息。通过调用 postMessage() 方法，可以向目标窗口发送消息，并在接收窗口中通过监听 message 事件来处理接收到的消息。这种方法需要在目标窗口中显式地处理接收到的消息，以确保安全性。
使用URL参数传递数据：通过修改Ifram的URL参数来传递数据，将数据编码为URL参数，并将其附加到Iframe的URL中，然后，在嵌入的页面中，可以通过读取URL参数来获取数据。这种方法适用于在不同域之间进行简单的单向数据传递
使用共享数据存储：可以使用共享数据存储（例如浏览器的LocalStorage或者SessionStorage）来进行跨域通信，一个窗口或Iframe将数据存储在共享存储中，另一个窗口或者Iframe可以读取和监听该存储中的数据变化，这种方法适用于在不同域之间进行双向数据通信。
使用跨文档通信API（Cross-document Messaging API）：跨文档通信API是一种用于在不通过窗口或Iframe之间进行跨域通信的高级方法，它提供了更复杂和灵活的消息传递机制，包括消息过滤和源验证，通过使用window.postMessage()方法和message事件的特性，跨域更安全的实现跨域通信。

通信：postMessage、onmessage

postMessage
想要发送消息的窗口调用接收窗口的postMessage方法，换句话说，如果我们想要把发送消息给win，我们应该调用win.postMessage(data，targetOrigin)

 // <iframe src="http://127.0.0.1:8890/2.html" name="example" />  
// win.postMessage(data，targetOrigin)
// data:要发送的数据，可以是任何对象，数据会被通过使用“结构化序列化算法（structured serialization algorithm）”进行克隆。IE 浏览器只支持字符串，因此我们需要对复杂的对象调用 JSON.stringify 方法进行处理，以支持该浏览器。
//targetOrigin：指定目标窗口的源，以便只有来自给定的源的窗口才能获得该消息。
 let win = window.frames.example;    
 win.postMessage("message", "http://127.0.0.1:8890"); 



window.frames
获取 <iframe> 的 window 对象的另一个方式是从命名集合 window.frames 中获取：
通过索引获取：window.frames[0] —— 文档中的第一个 iframe 的 window 对象。
通过名称获取：window.frames.iframeName —— 获取 name="iframeName" 的 iframe 的 window 对象。

 // <iframe src="/" style="height:80px" name="win" id="iframe"></iframe>
 
 alert(iframe.contentWindow == frames[0]); // true
 alert(iframe.contentWindow == frames.win); // true

onmessage
为了接收消息，目标窗口应该在 message 事件上有一个处理程序。当 postMessage 被调用时触发该事件（并且 targetOrigin 检查成功）

 window.addEventListener("message", function(event) {
   console.log(event)
   if (event.origin != 'http://http://127.0.0.1:8890') {
     // 来自未知的源的内容，我们忽略它
     return;
   }
 
   if (window == event.source) {
     // chrome 下, 页面初次加载后会触发一次 message 事件, event.source 是 window 对象
     // 此时 event.source.postMessage 会形成死循环
     // 因此，要跳过第一次的初始化触发的情况
     return
   }
     
   console.log( "received: " + event.data );
 
   // 可以使用 event.source.postMessage(...) 向回发送消息
   event.source.postMessage('i am 2.html')
 }, source);

IFrame的使用注意事项

在使用Iframe时，还需要注意以下几点：

安全性和隐私问题：在嵌入来自不受信任的源的内容时，需要考虑安全性和隐私问题。确保嵌入的内容来自可信的源，并避免引入潜在的安全风险。
性能和用户体验：过度使用Iframe可能会导致页面性能下降和用户体验问题。在决定使用Iframe时，需要权衡利弊，并确保对性能和用户体验进行充分的测试和优化。
跨域限制：由于同源策略的限制，Iframe受到跨域限制，阻止来自不同域名的Iframe访问彼此的内容。了解和处理跨域问题是使用Iframe时的重要考虑因素。

前后端不分离的历史遗留问题，让现在的开发寸步难行，很难进行也很难维护，所以使用添加菜单嵌套的方式是目前比较好的做法。