javascript - 在 iframe 中分配变量

Question

找了几天后，这个答案很接近，但仍然无法解决我的问题jQuery: How to assign a variable inside of .html

我正在尝试将文本框的价值放入框架的 scr 部分。我从上面的链接中了解到，javascript 必须提取变量或将其视为文本，但尝试了几天后无法使其正常工作。响应位于页面上的 div 中

<script>
$(document).ready(function() {
  $("#q").bind(
      "webkitspeechchange", 
      function(evt) {
        $('.response').html(
          "<iframe width='625' height='250' border='0' src='/index.php?q=' + INPUT_HERE + ' /><br> voice search vaule:"+ $(this).val())
        .fadeIn();   
}); 
});
</script>

Answer 1

这对我有用：

<script>
$(document).ready(function(){
    $('#q').on( 'webkitspeechchange', function(e) {
        $('#response').html('<iframe width="625" height="250" border="1" src="/index.php?q=' + $(this).val() + '" /><br> Voice search value: ' + $(this).val()).fadeIn();
    });
});
</script>

<input type="text" name="q" id="q" x-webkit-speech="x-webkit-speech">
<div id="response"></div>

这是JS Fiddle

如果您想删除周围的环境div，您可以调用$('#response').replaceWith(...而不是$('#response').html(...，但请注意，连续搜索将不再起作用，因为#response已从 DOM 中删除。