js实现网页嵌套
使用 iframe 实现网页嵌套
在 HTML 中通过 <iframe> 标签可以嵌入其他网页，这是最基础的网页嵌套方式。
<iframe src="https://example.com" width="800" height="600"></iframe>通过 JavaScript 可以动态控制 iframe 的属性：
const iframe = document.createElement('iframe');
iframe.src = 'https://example.com';
iframe.width = '800';
iframe.height = '600';
document.body.appendChild(iframe);使用 fetch 和 DOM 操作实现内容嵌入
如果需要更灵活的控制，可以通过 fetch API 获取目标网页内容，然后插入到当前页面。
fetch('https://example.com')
.then(response => response.text())
.then(html => {
const container = document.getElementById('embed-container');
container.innerHTML = html;
});跨域问题解决方案
当嵌入的网页与当前页面不同源时，会遇到跨域限制：
设置 iframe 的 sandbox 属性可以放宽部分权限：
<iframe src="https://example.com" sandbox="allow-same-origin allow-scripts"></iframe>使用 postMessage 实现跨域通信：
// 父页面
window.addEventListener('message', event => {
if (event.origin !== 'https://example.com') return;
console.log('Received message:', event.data);
});
// iframe 内
parent.postMessage('Hello from iframe', 'https://parent-site.com');使用 Web Components 封装嵌套内容
创建自定义元素来封装嵌套逻辑：
class WebEmbed extends HTMLElement {
connectedCallback() {
const src = this.getAttribute('src');
this.innerHTML = `<iframe src="${src}" style="width:100%;height:100%;border:none;"></iframe>`;
}
}
customElements.define('web-embed', WebEmbed);使用方式：
<web-embed src="https://example.com"></web-embed>响应式嵌套方案
确保嵌套内容适应不同屏幕尺寸：
.embed-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 比例 */
height: 0;
overflow: hidden;
}
.embed-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}安全性考虑
限制嵌套内容权限：
<iframe src="https://example.com"
sandbox="allow-scripts allow-forms"
allow="geolocation 'src'">
</iframe>验证消息来源：
window.addEventListener('message', event => {
if (event.origin !== 'https://trusted-site.com') return;
// 处理消息
});
