使用JavaScript无法为iframe填充src值的问题排查

嘿，我一眼就瞅见你的问题啦！你代码里的核心问题是：你获取到的是输入框这个DOM元素对象，而不是用户输入的URL文本值，直接把元素对象赋值给iframe的src属性，浏览器肯定不知道该怎么处理~

具体问题拆解 #

当你写 var url = document.getElementById("xxx"); 时，url 变量存储的是整个 <input> 元素本身，不是输入框里用户输入的内容。所以不管你用 setAttribute("src", url) 还是直接赋值 .src = url，本质都是把一个DOM对象塞给了src属性，这完全不符合要求。

修正后的代码示例 #

方案一：修改你最初的代码

<!DOCTYPE html> 
<html> 
<body style="text-align:center;"> 
  <iframe id="gfgFrame" src="" style="height: 50vh; width: 600px;"> </iframe> 
  <input type="text" id="xxx" placeholder="请输入完整URL（带http/https）"> 
  <p id="u"></p> 
  <button onclick="navigate()"> Click it </button> 
  <script> 
    function navigate() {
      // 关键：获取输入框的value属性值，这才是用户输入的URL
      const inputValue = document.getElementById("xxx").value;
      document.getElementById("gfgFrame").setAttribute("src", inputValue);
      document.getElementById("u").innerHTML = "Hello";
    }
  </script> 
</body> 
</html>

方案二：修正你后来尝试的写法

<script> 
  function navigate() {
    const urlInput = document.getElementById("xxx");
    // 同样要取value属性，而不是元素本身
    document.getElementById("gfgFrame").src = urlInput.value;
  } 
</script>

额外注意事项 #

• 一定要确保输入的URL是完整路径，比如要带 http:// 或者 https://，不然浏览器会把它当成当前页面的相对路径处理，导致加载失败。
• 如果遇到某些网站无法加载的情况，大概率是该网站设置了X-Frame-Options响应头，禁止自身被嵌入到iframe中，这属于网站的安全限制，不是代码的问题哦~

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