将用户输入动态地附加到<script src=“">来自Java Script中的文本框

Dynamically appending the user input to <script src= " "> from a textbox in Java Script

本文关键字：gt quot 来自 Java 文本 Script script 动态 输入 用户 lt      更新时间：2023-09-26

我是JavaScript的新手，我尝试在线搜索问题的解决方案，但没有成功。

我需要将用户的输入从文本框中附加到同一文件中<script>元素的"src"属性的按钮的onclick之后。我该怎么做？

<script id="url " type="text/javascript" src="http://gdata.youtube.com/feeds/api/videos?q=USER INPUT&alt=json-in-script&callback=showMyVideos2&max-results=30&format=5">
</script>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Search" OnClick= ? />
我道歉，但你的问题有点不清楚。如果我说得对，你只想把用户在文本框中写的任何内容"添加"到script标记的src属性中，对吗？如果是这样的话，我会沿着这条线做一些事情： 
(function( doc, $ ){
    $.call( doc, 'Button1' ).addEventListener( 'click', function() {
        var script = $.call( doc, 'url' );
        script.src += $.call( doc, 'TextBox1' ).value;
    });
}(document, document.getElementById ));

PS：我对文档和documentElementById函数进行了别名处理，以保存一些字符。。

我不完全确定你想要实现什么，但这里有几种技术：

  1. 动态检索所需的JavaScript（通过AJAX调用），并使用eval（）调用它->这将解释和执行JavaScript代码。这可能非常危险，所以要小心操作。

  2. 动态添加<脚本>元素，并将该元素附加到文档的元素中。

  3. 如果您使用的是jQuery，则可以使用$.getScript（）函数来动态检索和执行JavaScript。

还可以看看这个堆栈溢出问题：
如何动态插入<脚本>页面加载后通过jQuery标记？

虽然很古老，但这里对一些不同的技术进行了很好的描述：http://unixpapa.com/js/dyna.html

<input type="text" id="user_input" />
<div id="start">START</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javasscript">
    $(document).ready(function() {
        $('#start').on('click', function() {
            $.getScript('http://gdata.youtube.com/feeds/api/videos?q='+$('user_input').val()+'&alt=json-in-script&callback=showMyVideos2&max-results=30&format=5');
        })
    })
</script>

示例：http://jsfiddle.net/powtac/SvaXc/2/

如果你需要动态创建一个新的脚本标记（然后你可以删除你在标记中提供的标记），你可以这样做（我在这里使用jQuery是为了简化代码，否则我的帖子会变得不必要长）：

(function($){
    $(document.body).append( '<script src="' + $('#TextBox1').val() + '">' );
}(jQuery));

如果你不能（或想）使用jQuery，你可以这样做：

(function(doc, $) {
  window.addEventListener('load', function() { 
      var dynScript = doc.createElement('script');
      dynScript.setAttribute('src', $.call( doc, 'TextBox1' ).value );
      doc.body.appendChild( dynScript );      
  } );
}(document, document.getElementById ));

希望这能有所帮助。

相关文章：