HTML DOM 对iframe排版

HTML DOM iframe 排版

iframe 标签

<iframe> 标签用于在网页中嵌入另一个文档。

基本语法

<iframe src="URL" width="px" height="px" frameborder="0"></iframe>

主要属性

• src: 指定要嵌入的文档URL

• width: 设置iframe宽度

• height: 设置iframe高度

• frameborder: 是否显示边框(0为无边框，1为有边框)

• name: 为iframe命名

• sandbox: 安全限制选项

• allowfullscreen: 是否允许全屏

用法

基本用法

<iframe src="https://example.com" width="600" height="400"></iframe>

命名iframe

<iframe name="myFrame" src="page.html"></iframe>
<a href="newpage.html" target="myFrame">在iframe中加载</a>

动态修改内容

document.getElementById('myFrame').src = 'newpage.html';

CSS 扩展

样式控制

iframe {
    border: none; /* 移除边框 */
    margin: 0;
    padding: 0;
    display: block;
    overflow: hidden; /* 隐藏滚动条 */
}

/* 响应式iframe */
.responsive-iframe {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 比例 */
    height: 0;
    overflow: hidden;
}

.responsive-iframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

功能实例

嵌入视频

<iframe width="560" height="315" 
        src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
        frameborder="0" 
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen>
</iframe>

嵌入地图

<iframe src="https://maps.google.com/maps?q=New+York&output=embed"
        width="600" height="450" frameborder="0" style="border:0">
</iframe>

响应式iframe

<div class="responsive-iframe">
    <iframe src="content.html"></iframe>
</div>

DOM 操作

获取iframe内容

var iframe = document.getElementById('myFrame');
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

跨域通信

// 父页面
window.addEventListener('message', function(e) {
    if(e.origin !== 'https://child-domain.com') return;
    console.log('收到消息:', e.data);
});

// iframe内
parent.postMessage('Hello parent!', 'https://parent-domain.com');

注意事项

1. 跨域限制：同源策略会影响iframe与父页面的交互

2. 性能影响：过多iframe会影响页面加载性能

3. 移动设备适配：需要特别处理移动设备上的显示

4. 安全性：使用sandbox属性限制iframe权限