在开发中，与 iframe 与父页面之间的通信是一项常见需求，尤其是在 web 应用程序中。这篇文章将详细介绍如何通过 jQuery 实现这种通信，以及在此过程中遇到的一些技术细节。为了深入理解，我将从协议背景开始，逐步解析抓包方法、报文结构、交互过程以及多协议对比，最后通过逆向案例整合所有信息。
## 协议背景
在讨论 iframe 与父页面的通信之前，我们首先要了解网络通信的基本协议背景。
1.父页面 => 子页面$("#child_id").contents().find("#child_child_id");2.子页面 => 父页面window.parent.fn();parent.window.fn();window.parent.document.getElementById("#id");parent.window.document.get...
原创
2022-09-29 16:08:39
70阅读
下面本人来谈谈iframe之间通信问题及iframe自适应高度问题。 1. iframe通信 分为：同域通信 和 跨域通信。所谓同域通信是指 http://localhost/demo/iframe/iframeA.html 下的a.html页面嵌套 iframe 比如： <iframe src="http://localhost/demo/iframe/iframeB.html"
转载
2024-07-05 19:13:53
52阅读
postMessage 接口允许窗口之间相互通信，无论它们来自什么源。因此，这是解决“同源”策略的方式之一。它允许来自于 marh.com 的窗口与来自于 qq.com 的窗口进行通信，并交换信息，但前提是它们双方必须均同意并调用相应的 JavaScript 函数。这可以保护用户的安全。这个接口有两个部分。1 postMessage想要发送消息的窗口需要调用接收窗口的 postMessage 方法
原创
2023-11-17 13:33:21
35阅读
基本概念：window.self: 当前窗口自身的引用window.parent: 上一级父窗口的引用window.top: 最顶层窗口的引用 当页面中不存在 iframe 嵌套时，则三者均是当前窗口自身的引用。同域iframe相互调用：子页面调用父页面方法：window.parent.fatherFn(); 父页面调用子页面方法： window.sonFrameName.sonFn(); (so
转载
2023-11-10 06:36:15
466阅读
iframe在复合文档中经常用到，利用jquery操作iframe可以大幅提高效率，这里收集一些基本操作DOM方法： 父窗口操作IFRAME：window.frames["iframeSon"].document IFRAME操作父窗口: window.parent.documentjquery方法: 在父窗口中操作 选中IFRAME中的所有输入框： $(window.frames["iframe
转载
2023-07-26 18:09:37
165阅读
今天在公司是给ckeditor添加一个“是否显示”图片标题的功能难点：插件的内容很多，功能相当强大，在短时间之内无法通读和理解里面的逻辑关系，而且修改的内容不能破坏插件内部的逻辑关系，不能因为添加一个功能而引入更多的问题，因此只能从局部去解决这个问题突破口：知道页面时使用iframe框架插入的html，页面有些初始化的功能是在这里完成的，因此在这里添加这个checkbox组件，然后根据最后的win
转载
2023-10-18 20:12:12
101阅读
今天遇到一个问题：怎样实现点击一个按钮，在当前的页面上新增加一个小窗口，展示一个图片信息？如图：点击之前：单击之后：分析：要使新增的小窗口不影响父页面，我们这里采用iframe的框架的技术。【<iframe>也应该是框架的一种形式，它与<frame>不同的是，iframe可以嵌在网页中的任意部分。】实现是思路：（1）在按钮的上添加一个点击的事件，在点击后加入一个iframe
转载
2023-06-06 21:48:36
126阅读
使用jquery操作iframe
1、 内容里有两个ifame
<iframe id="leftiframe"...</iframe>
<iframe id="mainiframe..</iframe>
leftiframe中jQuery改变mainiframe的src代码：
$("#mainframe",parent.document.body).att
转载
2024-01-27 23:34:54
209阅读
使用jQuery在iframe中获取HTML这是我的情况。我有一个名为iframe.html的文件，其中包含图像幻灯片的代码。该代码有点像用户可以使用嵌入代码将幻灯片添加到他们的博客或网站(可以来自不同的域)。 假设用户必须在iframe.html中嵌入幻灯片，他们可以通过添加以下行来添加：这会将完整的HTML代码从iframe.html带到index.html，现在我需要一种方法来访问ifram
转载
2024-05-23 20:11:41
19阅读
一、同域下父子页面的通信 1.父页面调用子iframe页面 （1）通过iframe的Id获取子页面的dom，然后通过内置属性contentWindow取得子窗口的
原创
2024-01-21 00:58:46
295阅读
# iOS iframe通信bug解决方法
## 引言
在iOS开发中，我们常常会遇到iframe通信的问题，特别是在嵌入网页中使用iframe时。本文将介绍如何解决iOS中的iframe通信bug，并指导刚入行的小白如何实现。
## 整体流程
为了更好地指导小白，我们首先来看一下整个解决流程。下面是一个表格展示了实现iOS iframe通信bug的步骤：
| 步骤 | 描述 |
|---|
原创
2024-01-10 03:49:14
264阅读
父页面： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" co ...
转载
2021-09-09 20:42:00
147阅读
2评论
这篇文章主要介绍了jquery得到iframe src属性值的方法，很简单，很实用,需要的朋友可以参考下取得iframe src属性的的值：Html代码<!DOCTYPE HTML> <html> <head> <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/> <
转载
2023-05-24 13:50:08
387阅读
大家可能会遇到子页面内容较多但iframe高度不够的情况。给iframe设置scrolling="no"的话子页面内容显示不全，不设置又会出现滚动条从而影响美观。当我们点击不同的菜单让iframe加载不同的html文件时，iframe的高度就需要做相应的调整。
转载
2023-07-13 10:30:41
94阅读
1. HTMLIFrameElement.contentDocument
使用这个方法获取页面iframe中的dom对象，注意可能会有下面两种结果：
1.1 如果iframe和它的父级在同一个域名下，那么这个方法返回document（是一个嵌套的浏览器上下文环境）
转载
2023-07-13 10:29:56
373阅读
一、前言：
在web中，为了丰富我们的内容，往往需要引用其它HTML文件，这时候就需要用到 iframe 标签，本文就主要记录一下使用iframe所需要注意的问题
转载
2023-07-13 10:31:06
94阅读
