javascript - 此 javascript 是否有任何原因无法更改我的 IFrame 上的 "src"属性？

Question

所以我正在学习基本的 HTML 和 javascript(抱歉，如果这是错误的主题)，并且我正在尝试创建一个基本网站，用户在其中输入网站 url，然后 IFrame 会随该网站一起出现。我对 HTML 很陌生，所以这可能是一些愚蠢的事情，但我似乎找不到它是什么。让我困惑的是，这段代码在函数之外工作，尽管它立即处于事件状态，因此毫无用处。感谢您的帮助!

<iframe src="" name="myFrame" id="myFrame"></iframe>

<form onSubmit="setIframe()">
URL: <input type="text" name="urlbox" id="urlbox"> <input type="submit" value="go">
</form>

<script>
function setIframe()
    {
		var url = document.getElementById("urlbox").value;
		document.getElementById("myFrame").setAttribute("src","testwebsite.com");
    }

</script>

Answer 1

有两件事:提交表单通常会导致重新加载页面或重定向。为了防止这种情况，您可以调用 event.preventDefault()。

此外，您不需要使用setAttribute，设置src就足够了。

function setIframe(event) {
  event.preventDefault();
  var url = document.getElementById("urlbox").value;
  document.getElementById("myFrame").src = "https://www.youtube.com/embed/q6EoRBvdVPQ";
}

<iframe src="" name="myFrame" id="myFrame"></iframe>

<form onsubmit="setIframe(event)">
  URL:
  <input type="text" name="urlbox" id="urlbox">
  <input type="submit" value="go">
</form>

<强> Example on JSBin 。

请记住，许多网站不允许将其页面嵌入 iFrame 中。