参考资料

1. HTML 超链接
2. HTML 段落
3. html表单标签详细说明以及案例
4. HTML 用于短的引用
5. http-equiv="expires" 模拟 HTTP 头部中的 Expires 字段
6. HTML id 属性详解
7. HTML 图像格式化
8. 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();

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。