当前位置：首页 > JavaScript

js实现frame

2026-02-01 00:53:33JavaScript

使用 iframe 嵌入网页

在 HTML 中创建一个 iframe 元素，通过 JavaScript 动态设置其属性：

<iframe id="myFrame" src="about:blank"></iframe>

const frame = document.getElementById('myFrame');
frame.src = 'https://example.com';
frame.width = '800';
frame.height = '600';
frame.frameBorder = '0';

动态创建 iframe

通过 JavaScript 动态创建并插入 iframe 元素：

js实现frame

const frame = document.createElement('iframe');
frame.src = 'https://example.com';
frame.style.width = '100%';
frame.style.height = '500px';
document.body.appendChild(frame);

跨域通信

父页面与 iframe 之间进行跨域通信：

js实现frame

// 父页面发送消息
const frame = document.getElementById('myFrame');
frame.contentWindow.postMessage('Hello from parent', 'https://example.com');

// iframe 内接收消息
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://parent.com') return;
  console.log('Received message:', event.data);
});

安全性设置

为 iframe 添加安全相关的属性：

const frame = document.createElement('iframe');
frame.sandbox = 'allow-scripts allow-same-origin';
frame.allow = 'geolocation; microphone; camera';
frame.referrerPolicy = 'no-referrer-when-downgrade';

响应式 iframe

使 iframe 适应不同屏幕尺寸：

function resizeFrame() {
  const frame = document.getElementById('myFrame');
  frame.style.width = window.innerWidth + 'px';
  frame.style.height = window.innerHeight + 'px';
}
window.addEventListener('resize', resizeFrame);