参考资料

1. Html转JS有哪些
2. HTML 背景颜色
3. HTML 链接语法
4. HTML 字体, 字体颜色 ，字体大小
5. HTML 删除字符效果和插入字符效果
6. HTML 多媒体
7. HTML 内部样式表
8. HTML 强调

HTML iframe 元素详解

介绍

iframe (Inline Frame) 是 HTML 中用于在当前文档内嵌入另一个文档的标签。

基本标签

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

主要属性

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

• width: 设置 iframe 宽度

• height: 设置 iframe 高度

• name: 为 iframe 命名

• frameborder: 是否显示边框 (0/1)

• scrolling: 是否显示滚动条 (yes/no/auto)

• sandbox: 安全限制设置

• allowfullscreen: 是否允许全屏

基本用法

<iframe src="page.html" width="600" height="400"></iframe>

实例

嵌入外部网站

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

命名 iframe 用于链接目标

<iframe name="contentFrame" src="default.html"></iframe>
<a href="page1.html" target="contentFrame">加载页面1</a>

功能扩展

使用 CSS 样式化 iframe

iframe {
    border: 2px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

iframe.responsive {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
}

响应式 iframe

<div class="iframe-container">
    <iframe src="video.html" allowfullscreen></iframe>
</div>

<style>
.iframe-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%; /* 16:9 宽高比 */
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
</style>

使用 JavaScript 控制 iframe

// 获取 iframe 内容
var iframe = document.getElementById('myFrame');
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

// 父窗口调用 iframe 函数
iframe.contentWindow.functionName();

// iframe 调用父窗口函数
parent.functionName();