Question

我尝试做的是将一些用户输入从html文本字段保存到JS变量中，然后在按钮上单击将该文本放入iframe。

使用jQuery从文本字段中检索信息不是问题，因为我可以控制日志＆＃39; $（＆＃39;＃userinput＆＃39;）。val（）＆＃39;返回值然后将其保存到变量中似乎返回一个空字符串。

这是我的代码，它使用jQuery和vanilla来尝试存储字符串：

$(document).ready(function () {

    $result = $('#userinput').val();
    var output = document.getElementById('userinput').value;
    var iframe = document.getElementById('iframe');

    doc = iframe.contentDocument;
    doc.open();
    doc.write("test");
    doc.close();

    $('#btn_run').click(function () {
        console.log($('#userinput').val());
        console.log(output);
        console.log($result);
        doc.open();
        doc.write(output);
        doc.close();
    });
});

和HTML：

<input type="text" id="userinput">
    <iframe id="iframe"></iframe>
    <button id="btn_run">Run</button>

混淆。

感谢任何帮助：）

Answer 1

您需要在事件监听器中获取#userinput的值。这是因为字符串是原始值，不通过引用传递。因此，当您使用.value时，您将获得通话时的值。当你在回调中时，你获得了一个空字符串的值，因为当值存储在output变量中时输入为空。

由于iframe，此代码段无效。

$(document).ready(function() {

  $result = $('#userinput').val();
  
  var iframe = document.getElementById('iframe');

  doc = iframe.contentDocument;
  doc.open();
  doc.write("test");
  doc.close();

  $('#btn_run').click(function() {
    console.log($('#userinput').val());
    var output = document.getElementById('userinput').value;
    console.log(output);
    console.log($result);
    doc.open();
    doc.write(output);
    doc.close();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="userinput">

<iframe id="iframe"></iframe>

<button id="btn_run">Run</button>

Answer 2

在第4行初始化output的值时，仍然没有用户输入，因此output == ""。该值永远不会在您的代码中更新，因此当您致电doc.write(output)时，您实际上正在运行doc.write("")。

<input type="text" id="userinput">
<button id="btn_run">Run</button>
<iframe id="iframe"></iframe>

<script type="text/javascript">
$( document ).ready(function() {

  var doc = iframe.contentDocument;

  $('#btn_run').click(function(){
    doc.open();
    doc.write(document.getElementById('userinput').value);
    doc.close();
  });
});
</script>

这样，在需要时确定该值。在这个简单的例子中，没有理由定义变量。

你甚至不需要jQuery这个

<input type="text" id="userinput">
<button id="btn_run">Run</button>
<iframe id="iframe"></iframe>

<script type="text/javascript">      
  var doc = iframe.contentDocument;

  function writeToIframe() {
    doc.open();
    doc.write(document.getElementById('userinput').value);
    doc.close();
  }

  document.getElementById('btn_run').addEventListener('click', writeToIframe); 

</script>

Answer 3

在声明后仍然使用$（'＃userinput'）。val（）而不是$ result来再次延长代码。关闭输入标签

如何使用javascript从文本输入中将值存储为字符串

3 个答案: