js实现iframe

使用JavaScript创建iframe

在JavaScript中动态创建iframe可以通过document.createElement方法实现。以下是一个基本示例：

const iframe = document.createElement('iframe');
iframe.src = 'https://example.com';
iframe.width = '600';
iframe.height = '400';
document.body.appendChild(iframe);

设置iframe属性

创建后可以通过属性或setAttribute方法配置iframe：

iframe.setAttribute('allowfullscreen', '');
iframe.frameborder = '0';
iframe.id = 'customFrame';

安全限制与sandbox属性

现代浏览器要求对跨域iframe设置sandbox属性以限制权限：

iframe.sandbox = 'allow-same-origin allow-scripts';

内容写入iframe

通过contentDocument或contentWindow操作iframe内部内容（需同源）：

iframe.onload = function() {
  const doc = iframe.contentDocument || iframe.contentWindow.document;
  doc.open();
  doc.write('<h1>Dynamic Content</h1>');
  doc.close();
};

跨域通信

使用postMessage实现跨域通信：

// 父页面发送消息
iframe.contentWindow.postMessage('Hello', 'https://target-origin.com');

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

响应式iframe

通过CSS使iframe自适应容器大小：

iframe {
  width: 100%;
  height: 100%;
  border: none;
}

移除iframe

从DOM中移除iframe元素：

iframe.parentNode.removeChild(iframe);