获取文本输入的值并将其作为iframe的源

Question

我有一个iframe默认为src="http://mysite.com"

我有一个文本输入字段和一个提交按钮。

在提交时，我想获取输入字段的值并将其加载到iframe的src属性中以显示不同的src

我有一个黑客攻击解决方案，sorta工作正常，但我想提炼它并使用jQuery方法。 （或者其他什么是最好的方法）

这是codepen:

当前代码：

HTML

<form class="visitor-input-form">
  <h2>Enter URL:</h2>

  <input type="text" class="currentUrl" placeholder="http://your-site.com" id="txtSRC" />

  <input type="submit" class="submit-button" value="View site" />
</form>

<div class="iframe-w">
  <h3>Small</h3>
  <iframe id="iframe01" class="i-frame small" src="http://nouveau.io"></iframe>
  <!-- default url -->
</div>

javaScript / jQuery

var ourUrl     =   $( ".i-frame" ).attr("src");
var urlValue   =   $("#txtSRC").val();

$(".submit-button").click( function() {

  //alert("heck");

  document.getElementById("iframe01").src = document.getElementById("txtSRC").value;


  // I want this to work...  //

  //$("#iframe01").attr("src") = $("#txtSRC").val();

});

任何帮助都是rad。此外，如果你能告诉我如果人们忘记了http：// etc。

那将会处理的注册表，那么超级超级点数

Answer 1

您的语法对于jQuery方法不正确。如有疑问，请阅读您正在使用的方法的jQuery API

jQuery setter从不使用method() = value将参数传递给方法

你应该使用

$("#iframe01").attr("src", $("#txtSRC").val());