[英]How to dynamically add a canvas inside script tag to HTML using Jquery
I have the following problem: I need to be able to add dynamically a canvas (to be precise, a specific canvas, like this one https://web.chemdoodle.com/tutorial/2d-structure-canvases/sketcher-canvas/ ) in .js file but my several attempts failed. 我有以下问题:我需要能够动态添加画布(准确地说,是一种特定的画布,例如https://web.chemdoodle.com/tutorial/2d-structure-canvases/sketcher-canvas/ )在.js文件中,但我的几次尝试都失败了。 I want to insert the canvas into
<div id="sketcher_canvas"></div>
.The canvas can be created inside script tag only, so I need to add script tags to HTML too. 我想将画布插入
<div id="sketcher_canvas"></div>
。画布只能在script标签内创建,因此我也需要向HTML添加script标签。 Here is my HTML: 这是我的HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>ELN</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
<link href="{{url_for('static', filename='css/main.css')}}" rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="{{url_for('static', filename='js/main2.js')}}"></script>
<!-- ChemDoodle -->
<link rel="stylesheet" href="{{url_for('static', filename='ChemDoodle/install/ChemDoodleWeb.css')}}" type="text/css">
<script type="text/javascript" src="{{url_for('static', filename='ChemDoodle/install/ChemDoodleWeb.js')}}"></script>
<!--these two are required by the SketcherCanvas plugin-->
<link rel="stylesheet" href="{{ url_for('static', filename='ChemDoodle/install/uis/jquery-ui-1.10.3.custom.css')}}" type="text/css">
<script type="text/javascript" src="{{url_for('static', filename='ChemDoodle/install/uis/ChemDoodleWeb-uis.js')}}"></script>
</head>
<body>
<script>
function make_canvas(){
sketcher = new ChemDoodle.SketcherCanvas('sketcher',600,200);
};
</script>
<div id='sketcher_canvas'>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</body>
</html>
And this is my .js: 这是我的.js:
$(document).ready(function(){
// First option
$('sketcher_canvas').append('<script>make_canvas();<\/script>);
// Second option
var script = document.createElement("script");
script.type = "text/javascript";
script.text = "make_canvas()";
var div = document.getElementById('sketcher_canvas');
div.innerHTML = script.text;
});
Any comments/suggestions are highly appreciated! 任何意见/建议都受到高度赞赏!
It looks like you are making things more complicated than they need to be. 看起来您正在使事情变得比他们需要的复杂。 You don't need to make a new script to call a function from another script.
您无需创建新脚本即可从另一个脚本调用函数。 You can call that function with a button like so:
您可以使用如下按钮来调用该函数:
<script>
function make_canvas(){
var newCanvas = document.createElement("canvas");
newCanvas.id = "sketcher";
newCanvas.class = "ChemDoodleWebComponent";
document.getElementById("sketcher_canvas").appendChild(newCanvas);
sketcher = new ChemDoodle.SketcherCanvas('sketcher',600,200);
};
</script>
<button onclick="make_canvas()">Make Canvas</button>
<div id='sketcher_canvas'>
</div>
EDIT: I have updated the make_canvas function. 编辑:我已经更新了make_canvas函数。 You can see how it works in this fiddle .
您可以在此小提琴中看到它的工作方式。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.