使用 iframe 的注意事项

最新推荐文章于 2025-07-12 16:41:47 发布

不想当厨师的程序员不是一个好画家

最新推荐文章于 2025-07-12 16:41:47 发布

阅读量673

点赞数

CC 4.0 BY-SA版权

分类专栏： # Java 文章标签： 1024程序员节

本文链接：https://blog.youkuaiyun.com/qq_35727395/article/details/88927851

Java 专栏收录该内容

3 篇文章

订阅专栏

本文详细解析了在前端开发中常见的跨域访问错误，当iframe的src属性使用了不同的协议类型（如https与http混用）时，浏览器会因为安全策略阻止页面之间的交互。文章通过一个具体的例子说明了错误信息的含义及产生原因。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 前端Console报错信息

Uncaught SecurityError: Blocked a frame with origin "https://www.baidu.com" from accessing a frame with origin "http://localhost:8080".  The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match.

chrome-extension://eobojkjbpolpnaolkijihjkpmhieijhb/js/content.js:7 [Sun Mar 31 2019 13:16:34 GMT+0800 (中国标准时间)][content.js][ 785]Enter content.js, contentId = 785

2. 原因
iframe 的 src = "https://www.baidu.com"，而被请求的路径为 http://localhost:8080，其中 https 协议与 http 不匹配。