JavaScript 操作 iframe 的完整示例与注意事项

作者:木棉

时间:2026-10-23

浏览:236

本文通过一个完整的 HTML 示例,演示如何使用 JavaScript 动态修改 iframe 的 src 属性以加载不同页面,并尝试获取其内部文本内容。文章特别指出,引入外部脚本后需刷新页面方可执行,且跨域访问存在严格限制,开发者需注意这些实际约束。

文章目录

iframe 基础结构与交互按钮

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Iframe学习</title>  </head> <body> <iframe src="https://www.jb51.net" id="iframe1"></iframe> <input type="button" value="改变src" onclick="changeSrc();" /> <input type="button" value="getText" onclick="getText();" /> </body> </html>

外部脚本执行注意事项

注意:在代码中引入外部 JavaScript 文件后,必须刷新页面,脚本才能正常执行。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章