使用 javascript 更改后，我的 iframe 将不会保留其 src 值

Question

我是 iframe 的新手，一般来说 HTML/JavaScript。当用户单击 submit 按钮时，我试图更改 iframe src。但是，由于某种原因，src 值在我更改后一直恢复为原始值。请忽略不寻常的 ID 名称。 :)

这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
<title>Card Getter</title>
<script>
  function get(){
    var name = document.getElementById("card").value;
    document.getElementById("toast").src="http://gatherer.wizards.com/Pages/Search/Default.aspx?action=advanced&name=+["+name+"]";
    alert(name);
  };
  function check(){
    alert(document.getElementById("toast").src);
  };
</script>
</head>
<body>
    <iframe src="" id="toast"></iframe>
  <form>
    <p>Card Name:</p>
    <br>
    <input type="text" id="card">
    <br>
    <input type="submit" onclick="get()" value="Submit">
  </form>
  <form>
    <input type="button" onclick="check()" value="check">
  </form>
</body>
</html>

感谢您的帮助。

Answer 1

发生这种情况是因为您的表单是在按下按钮时提交的。由于您没有指定表单操作，因此假定为当前页面 - 因此这会导致重新加载，从而重置 iframe 的 src.

作为快速修复，您可以将 return false; 添加到 onclick 处理程序：

<input type="submit" onclick="get(); return false;" value="Submit">

这将阻止提交表单。

使用 javascript 更改后，我的 iframe 将不会保留其 src 值

My iframe won't keep its src value after it has been changed with javascript

html

javascript

iframe