javascript - 无法获取输入值并将其附加到 iframe src

Question

我有一个带有输入框的页面，用户将在其中输入 URL，然后该 URL 将添加为多个 IFRAMES 的 SRC。但我不能这样做。谁能告诉我这里出了什么问题，甚至可以即兴发挥。

甚至可以使用“表单标签”和“提交”按钮来管理它吗？

  var frametest = $('#test-url').val();
  var urlproto = 'http://';
  $('#get-url-btn').click(function() {
    $('.demo-frame').attr('src', urlproto + frametest);
  });

.demo-frame {
  width: 200px;
  height: 200px;
  overflow: hidden;
  overflow-y: auto;
  margin: 15px;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group">
  <input type="url" id="test-url" placeholder="Enter URL">
  <button type="button" id="get-url-btn">Check</button>
</div>
<div class="demo">
  <iframe class="demo-frame" src=""></iframe>
  <iframe class="demo-frame" src=""></iframe>
  <iframe class="demo-frame" src=""></iframe>
  <iframe class="demo-frame" src=""></iframe>
  <iframe class="demo-frame" src=""></iframe>
  <iframe class="demo-frame" src=""></iframe>
</div>

Answer 1

您正在检索该输入文本的空值，而是使您的 js 代码如下所示:*您可以使用此网址 www.example.com

进行测试

var urlproto = 'http://';
$('#get-url-btn').click(function () {
    var frametest = $('#test-url').val();
    $('.demo-frame').attr('src', urlproto + frametest);
});

但是，这可能并不总是有效，因为 'X-Frame-Options' 为 'SAMEORIGIN' 或 DENY

JSFiddle