参考资料

1. HTML DOM 返回image的替代文本
2. HTML DOM对单个单元格的内容垂直对齐
3. HTML DOM 修改
4. HTML DOM 返回图像映射的某个区域的hostname实例
5. HTML DOM添加表格中的行
6. HTML DOM 返回一个锚的名字 实例
7. HTML DOM 鼠标的坐标？
8. HTML DOM 返回一个区域的href属性的锚部分实例

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>