本文通过一个完整的 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 文件后,必须刷新页面,脚本才能正常执行。