我有一个具有多个功能的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] 删除。
我来说两句