使用onclick加载js文件

用户名

我有一个具有多个功能的JavaScript文件。

我在网上找到了此脚本,该脚本使我可以通过单击按钮来调用js文件。

假设js文件名为black.js,是否有更好的方式编写此代码或其他脚本,该脚本或脚本允许我调用整个javascript文件,因为我有多个脚本,而且无法结束调用的脚本。

我试过了 :

return false; 这是脚本:

var btn = document.getElementById('img');
var loaded = false;
btn.addEventListener('click', function(e) {
    if(loaded) return;
    loaded = true;
    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.src = 'black.js';
    var first = document.getElementsByTagName('script')[0]; 
    first.parentNode.insertBefore(script, first);

    if(window.addEventListener) {
      script.addEventListener('load', function(e) {
        // now you can access the functions inside the JS file
      });
    } else {
      script.onreadystatechange = function() {
        if(this.readyState === "loaded" || this.readyState === "complete") {
          // access the functions in the JS file
          script.onreadystatechange = null;
        }
      };
    }
});

这是我的Javascript文件

var canvas = document.getElementById('canvas'),
coord = document.getElementById('coord'),
ctx = canvas.getContext('2d'), // get 2D context
imgCat = new Image(),
arr = [];

imgCat.src =   'http://c.wearehugh.com/dih5/openclipart.org_media_files_johnny_automatic_1360.png';
imgCat.onload = function() { // wait for image load
    ctx.drawImage(imgCat, 0, 0); // draw imgCat on (0, 0)
};

var mousedown = false;
$(function(){
    $("img").click(function(){
        ajax_request();
    });
});

ctx.strokeStyle = '#14890E';
ctx.lineWidth = 5;
canvas.onmousedown = function(e) {
    arr = [];
    var pos = fixPosition(e, canvas);
    mousedown = true;
    ctx.beginPath();
    ctx.moveTo(pos.x, pos.y);
    return false;
};

canvas.onmousemove = function(e) {
var pos = fixPosition(e, canvas);
    // coord.innerHTML = '(' + pos.x + ',' + pos.y + ')';
    if (mousedown) {
        ctx.lineTo(pos.x, pos.y);
        ctx.stroke();
       arr.push([pos.x, pos.y])
    }
};

canvas.onmouseup = function(e) {
    mousedown = false;
    // $('#coords').html(JSON.stringify(arr, null, 2));
};


function fixPosition(e, gCanvasElement) {
    var x;
    var y;
    if (e.pageX || e.pageY) { 
      x = e.pageX;
      y = e.pageY;
    }
    else { 
      x = e.clientX + document.body.scrollLeft +
          document.documentElement.scrollLeft;
      y = e.clientY + document.body.scrollTop +
          document.documentElement.scrollTop;
    } 
    x -= gCanvasElement.offsetLeft;
    y -= gCanvasElement.offsetTop;
    return {x: x, y:y};
}
加布里埃尔·拉特纳

我手头没有您的代码,但是请尝试以下操作,用适当的值替换尖括号值。

// makes sure html has loaded before element query
// ommit if html has already loaded
window.onload = function(){

    var btn = document.getElementsByTagName('#<id_of_button>');
    btn.onclick = function (e) {

        var file = '<relative_path_to_file>.js';
        var f = document.createElement('script');

        f.onload = function(){
            // use the loaded script here if needed
        };

        f.setAttribute('type', 'text/javascript');
        f.setAttribute('src', file);
        document.getElementsByTagName('head')[0].appendChild(f);
    }
}

确保在文档完成加载之前声明window.onload(如果使用),否则代码将无法运行。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用onclick加载js文件

来自分类Dev

使用requireJS动态加载js文件

来自分类Dev

使用require.js加载控制器js文件

来自分类Dev

使用require和node.js加载远程js文件

来自分类Dev

使用外部JS文件中的Head.js加载资源

来自分类Dev

使用Node JS和React js的文件加载问题

来自分类Dev

使用require和node.js加载远程js文件

来自分类Dev

使用外部JS文件中的Head.js加载资源

来自分类Dev

js文件的加载顺序

来自分类Dev

js文件的加载顺序

来自分类Dev

使用angular.js加载用于茉莉测试的json文件

来自分类Dev

如何使用nodejs加载js和css文件

来自分类Dev

使用节点中的require加载在线js文件

来自分类Dev

pjax加载的js文件不能使用jquery

来自分类Dev

使用next.js加载外部scss文件(反应)

来自分类Dev

如何使用三个js加载gltf文件

来自分类Dev

使用节点中的require加载在线js文件

来自分类Dev

使用svg.js加载和转换并嵌入SVG文件

来自分类Dev

如何使用ruby gem commonjs加载纯JS文件?

来自分类Dev

如何使用或加载xxx.js.twig文件

来自分类Dev

使用 Three.js 加载 STL 文件时出错

来自分类Dev

在 JS 上使用 require 语句加载多个文件

来自分类Dev

使用 Node.JS 加载 .ejs 文件失败

来自分类Dev

使用Navbar动态显示/加载React.js组件onClick吗?

来自分类Dev

onclick和外部js文件

来自分类Dev

无法使用引导程序希望我为 Carousel 导入的 js 文件加载我的 js 文件

来自分类Dev

使用Office.js在MS Word加载项中加载Excel文件

来自分类Dev

加载html后如何加载js文件

来自分类Dev

加载外部JS文件的进度