参考资料

1. HTML DOM 根节点
2. HTML DOM 改变image的src
3. HTML DOM单元格内容水平对齐
4. HTML DOM将下拉列表变成多行列表
5. HTML DOM 返回页面上所有相对链接的基链接 实例
6. HTML DOM 当点击完button不可用 实例
7. HTML DOM 节点列表长度
8. HTML DOM添加表格行中的单元格

HTML DOM 改变 iframe 的 src

详细介绍

通过 HTML DOM 可以动态改变 iframe 元素的 src 属性，实现动态加载不同内容的功能。这种方法常用于单页应用、动态内容加载等场景。

标签

基本 iframe 标签：

<iframe id="myFrame" src="default.html"></iframe>

用法

1. 通过 JavaScript 获取 iframe 元素

2. 修改其 src 属性

实例

<iframe id="myFrame" src="default.html"></iframe>

<button onclick="changeSrc()">更改内容</button>

<script>
function changeSrc() {
  document.getElementById("myFrame").src = "newpage.html";
}
</script>

功能

• 动态加载不同网页内容

• 无需刷新整个页面

• 实现无缝的内容切换

CSS 扩展

可以为 iframe 添加样式：

#iframeStyle {
  width: 100%;
  height: 500px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

#iframeStyle:hover {
  border-color: #999;
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
}

使用带样式的 iframe：

<iframe id="iframeStyle" src="content.html"></iframe>

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