Question

我试图制作一个按钮，点击它时会运行JavaScript。首先，我的脚本是这样的

<script>
    function myFunction()
    {
        alert('Invalid username or password. Please try again.')
    }
</script>

<input onclick="myFunction()" type="submit" value="Generate" href="submit.php" >

它有效，并且会出现一个弹出窗口。但是当我尝试从另一个站点调用JavaScript时，没有任何反应。

<script>
    function myFunction()
    {            
        document.body.appendChild(document.createElement('script')).src='https://raw2.github.com/BlackEagleBCC/Script/master/myscript.js';
    }
</script>

<input onclick="myFunction()" type="submit" value="Generate" href="submit.php" >

Answer 1

一旦发生事件，您需要包含js文件。

请参阅此link，它演示动态包括js和css。

添加HTML代码

<ul>
 <li><a href="javascript:loadjscssfile('myscript.js','js')">Load "myscript.js"</a></li>
 <li><a href="javascript:loadjscssfile('mystyle.css','css')">Load "mystyle.css"</a></li>
</ul>

然后是js代码

function loadjscssfile(filename, filetype){
 if (filetype=="js"){ //if filename is a external JavaScript file
  var fileref=document.createElement('script')
  fileref.setAttribute("type","text/javascript")
  fileref.setAttribute("src", filename)
 }
 else if (filetype=="css"){ //if filename is an external CSS file
  var fileref=document.createElement("link")
  fileref.setAttribute("rel", "stylesheet")
  fileref.setAttribute("type", "text/css")
  fileref.setAttribute("href", filename)
 }
 if (typeof fileref!="undefined")
  document.getElementsByTagName("head")[0].appendChild(fileref)
}

myscript.js的代码

var petname="Spotty"
alert("Pet Name: " + petname)

mystyle.css的代码

#ul li{
background-color: lightyellow;
}

与此类似：

您可以在按钮onclick（）事件处理程序中调用loadjscssfile（'myscript.js'，'js'）。

Answer 2

更新：试试这个：

<a id='myScript'  type="submit"  href="submit.php" > Generate </a>

脚本：

<script type="text/javascript">
    var myScript = document.getElementById('myScript');

    myScript.onclick = function(){

        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "https://raw2.github.com/BlackEagleBCC/Script/master/myscript.js"; 
        document.getElementsByTagName("head")[0].appendChild(script);
        return false;
    }
</script>

已编辑：以下解决方案可能不是您现在想要的。

我一直在使用这个，这是我从stackoverflow本身找到的解决方案。

function loadScripts(array,callback){
    var loader = function(src,handler){
        var script = document.createElement("script");
        script.src = src;
        script.onload = script.onreadystatechange = function(){
        script.onreadystatechange = script.onload = null;
            handler();
        }
        var head = document.getElementsByTagName("head")[0];
        (head || document.body).appendChild( script );
    };
    (function(){
        if(array.length!=0){
            loader(array.shift(),arguments.callee);
        }else{
            callback && callback();
        }
    })();
}

这将有助于您创建脚本标记。

loadScripts([
   "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js",
   "https://raw2.github.com/BlackEagleBCC/Script/master/myscript.js"
],function(){
    alert('Scripts have been loaded successfully');
});

<强>编辑：当我需要构建脚本标记并在所有内容加载完成后获得回调时，我使用了这种方法。（这些东西派上用场:)） https://stackoverflow.com/a/1867135/3222041

如何在onclick按钮中包含.js文件？

2 个答案: