javascript - 带文本框的 iframe

Question

我的代码有什么问题？只有第二个 iframe 有效，而第一个框无效。

任何形式的帮助将不胜感激。

<form action="" method="post" id="url-setter">
  <input type="text" value='' name="url" id="url" />
  <button type="submit" name="submit">Submit</button>
</form>
<iframe id="the-frame" width="540" height="480"></iframe>
<iframe id="the-frame1" width="540" height="480"></iframe>
<script type="text/javascript">
  (function() {
    "use strict";
    var url_setter = document.getElementById('url-setter'),
      url = document.getElementById('url'),
      the_iframe = document.getElementById('the-frame');
    url_setter.onsubmit = function(event) {
      event.preventDefault();
      the_iframe.src = url.value;
    };
  }());
  (function() {
    "use strict";
    var url_setter = document.getElementById('url-setter'),
      url = document.getElementById('url'),
      the_iframe = document.getElementById('the-frame1');
    url_setter.onsubmit = function(event) {
      event.preventDefault();
      the_iframe.src = url.value;
    };
  }());
</script>

标签： javascripthtmliframe

Answer 1

首先，不要分配onsubmit两次，其次，您需要在触发url时获取元素值onsubmit，否则没有任何值。

堆栈片段

<form action="" method="post" id="url-setter">
  <input type="text" value='' name="url" id="url" />
  <button type="submit" name="submit">Submit</button>
</form>
<iframe id="the-frame" width="540" height="480"></iframe>
<iframe id="the-frame1" width="540" height="480"></iframe>
<script type="text/javascript">
  (function() {
    "use strict";
    var url_setter = document.getElementById('url-setter'),
      the_iframe = document.getElementById('the-frame'),
      the_iframe1 = document.getElementById('the-frame1');

    url_setter.onsubmit = function(event) {
      event.preventDefault();
      var url = document.getElementById('url');
      the_iframe.src = url.value;
      the_iframe1.src = url.value;
    };
  }());
</script>