参考资料

1. HTML DOM 返回图像映射的某个区域的pathname 实例
2. HTML DOM 返回图像映射的某个区域的shape 实例
3. HTML DOM document.write() 方法
4. HTML DOM添加表格行中的单元格
5. HTML DOM在下拉列表中选择多个选项
6. HTML DOM 元素
7. HTML DOM 返回一个区域的href属性的querystring部分 实例
8. HTML DOM 返回一个锚的名字 实例

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权限