在前端开发中，iframe元素常用于嵌入其他页面内容，通过JavaScript操作iframe可以实现跨页面交互、内容获取、样式调整等多种功能。下面先介绍操作iframe的基础前提，再详解4个常用的操作API。
操作iframe的基础前提
要操作iframe元素，首先需要获取到iframe的DOM对象，通常可以通过getElementById、querySelector等方法获取，示例代码如下：
// 获取id为myIframe的iframe元素
const iframeEle = document.getElementById('myIframe');
// 通过选择器获取第一个iframe元素
const firstIframe = document.querySelector('iframe');
注意：操作iframe内部内容时，需要遵循同源策略，若iframe加载的页面与当前页面不同源，部分API会受到限制。
常用API一：contentWindow
contentWindow是iframe元素的一个属性，返回iframe内部的window对象，通过它可以访问iframe内部的全局变量、函数等。如果不同源，只能访问部分只读属性。
同源场景下的使用示例：
const iframeEle = document.getElementById('myIframe');
// 获取iframe内部的window对象
const iframeWindow = iframeEle.contentWindow;
// 调用iframe内部定义的全局函数
iframeWindow.iframeInnerFunc();
// 获取iframe内部的全局变量
console.log(iframeWindow.innerVar);
常用API二：contentDocument
contentDocument属性返回iframe内部的document对象，通过它可以操作iframe内部的DOM结构，比如获取元素、修改内容等，同样受同源策略限制。
同源场景下的使用示例：
const iframeEle = document.getElementById('myIframe');
// 获取iframe内部的document对象
const iframeDoc = iframeEle.contentDocument;
// 获取iframe内部id为innerDiv的元素
const innerDiv = iframeDoc.getElementById('innerDiv');
// 修改该元素的内容
innerDiv.innerHTML = '修改后的iframe内部内容';
// 给iframe内部的按钮添加点击事件
const innerBtn = iframeDoc.querySelector('button');
innerBtn.addEventListener('click', () => {
console.log('点击了iframe内部的按钮');
});
常用API三：postMessage
当iframe与当前页面不同源时，contentWindow和contentDocument的很多操作会被限制，此时可以使用postMessage实现跨域通信。该方法是window对象的方法，通过iframe的contentWindow调用，向iframe内部发送消息。
当前页面向iframe发送消息的示例：
const iframeEle = document.getElementById('myIframe');
// 向iframe发送消息，第一个参数是消息内容，第二个参数是目标origin，*表示不限制
iframeEle.contentWindow.postMessage({
type: 'updateContent',
data: '来自父页面的消息'
}, '*');
iframe内部接收消息的示例：
// iframe内部的监听代码
window.addEventListener('message', (event) => {
// 可以校验event.origin是否为可信的源
console.log('收到父页面消息：', event.data);
if (event.data.type === 'updateContent') {
document.getElementById('innerDiv').innerHTML = event.data.data;
}
});
常用API四：sandbox属性相关操作
iframe的sandbox属性用于限制iframe内部的行为，增强安全性，我们可以通过JavaScript动态修改该属性的值，调整对iframe的限制规则。
动态修改sandbox属性的示例：
const iframeEle = document.getElementById('myIframe');
// 初始设置sandbox属性，禁止脚本执行和表单提交
iframeEle.sandbox = 'allow-same-origin allow-forms';
// 后续需要允许脚本执行时，修改sandbox属性
iframeEle.sandbox.add('allow-scripts');
// 移除某个限制
iframeEle.sandbox.remove('allow-forms');
sandbox常用的值包括：allow-scripts（允许执行脚本）、allow-same-origin（允许同源请求）、allow-forms（允许表单提交）等，多个值用空格分隔。
注意事项总结
- 操作iframe内部DOM时，需要确保iframe已经加载完成，可以监听iframe的
load事件后再执行操作。 - 跨域场景下优先使用postMessage进行通信，避免直接访问受限属性。
- 使用sandbox属性时，遵循最小权限原则，只开放必要的权限。
// 监听iframe加载完成后再操作
const iframeEle = document.getElementById('myIframe');
iframeEle.addEventListener('load', () => {
console.log('iframe加载完成，可以执行操作');
// 此处编写操作iframe的代码
});
iframeJavaScriptcontentWindowcontentDocumentpostMessage修改时间：2026-06-19 21:06:31