参考资料

1. HTML DOM 改变image的src
2. HTML DOM 返回当前的文件和链接的文档之间的关系
3. HTML DOM 导航节点关系
4. HTML DOM单元格内容垂直对齐
5. HTML DOM弹出下拉列表中所有选项
6. HTML DOM对单个单元格的内容垂直对齐
7. HTML DOM 返回图像映射的某个区域的pathname 实例
8. HTML DOM弹出下拉列表中被选中的选项的索引

HTML DOM 改变一个iframe的src

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>