参考资料

1. HTML 列表
2. Html网页 Web 安全色
3. HTML 框架
4. HTML 表单详解
5. cache-control 浏览器缓存行为
6. HTML高度与宽度设置 Iframe
7. HTML 有序列表
8. Html转义工具有哪些

HTML 来显示目录链接页面使用 iframe

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();