如何实现点击链接时动态修改embed的src且不刷新页面？

首先，你的代码里有几个小问题导致功能无法正常工作，我来帮你一一修复：

原代码的问题点 #

• 每个<a>标签写了两个onclick属性，HTML元素不能有重复属性，浏览器只会执行最后一个，前面的javascript:void(0);相当于无效
• popWhenClicked函数里，你把href用引号包起来了，这会把字符串'href'赋值给src，而不是传入的实际URL
• document.getElementsByTagName("embed")返回的是一个元素集合（HTMLCollection），你需要指定具体的元素（比如第一个）才能调用setAttribute

修复后的完整代码 #

<?php 
echo "<a href='http://google.com' onclick='popWhenClicked(this.href); return false;'>Google.com</a><br />"; 
echo "<a href='http://bing.com' onclick='popWhenClicked(this.href); return false;'>Bing.com</a><br />"; 
echo "<embed src='http://yahoo.com' width='700px' height='500px' id='targetEmbed' />"; 
?> 

<script type='text/javascript'> 
function popWhenClicked(href) {
  // 通过ID获取embed元素，比getElementsByTagName更精准
  document.getElementById('targetEmbed').setAttribute('src', href);
}
</script>

关键修复说明 #

1. 合并onclick逻辑：把javascript:void(0);换成return false;放在同一个onclick里，既阻止默认跳转行为，又执行我们的函数
2. 给embed加ID：用getElementById获取元素比标签名更精准，避免页面有多个embed时出错
3. 正确传递URL：函数里直接用变量href，不要加引号，这样才会把点击的链接地址赋值给embed的src
4. 去掉冗余的javascript:前缀：在onclick里不需要写javascript:，直接写函数名即可

这样修改后，点击不同的链接就能实时切换embed的内容，而且不需要刷新页面啦～

内容的提问来源于stack exchange，提问作者wished