参考资料

1. HTML DOM 哪个鼠标键被点击了？
2. HTML DOM 设置image的hspace和vspace属性
3. HTML DOM 返回和设置链接的hreflang属性实例
4. HTML DOM 返回一个button的value 实例
5. HTML DOM获得有下拉列表的表单的ID
6. HTML DOM 打开输出流，向流中输入文本实例
7. HTML DOM 根节点childNodes 和 nodeValue
8. HTML DOM 返回文档中的所有cookies的名称/值对 实例

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>