参考资料

1. HTML 用于短的引用
2. HTML 颜色采用的是 RGB 颜色
3. html图像标签详细说明以及案例
4. HTML 内联式
5. HTML 用于双向重写
6. HTML 常用1600 万种不同颜色颜色代码表
7. HTML 书签属性格式化
8. Html网页 Web 安全色

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