如何使用Jquery将脚本标签内部的画布动态添加到HTML

Question

我有以下问题：我需要能够动态添加画布（准确地说，是一种特定的画布，例如https://web.chemdoodle.com/tutorial/2d-structure-canvases/sketcher-canvas/ ）在.js文件中，但我的几次尝试都失败了。 我想将画布插入<div id="sketcher_canvas"></div> 。画布只能在script标签内创建，因此我也需要向HTML添加script标签。 这是我的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>

这是我的.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;
});

任何意见/建议都受到高度赞赏！

Answer 1

看起来您正在使事情变得比他们需要的复杂。 您无需创建新脚本即可从另一个脚本调用函数。 您可以使用如下按钮来调用该函数：

        <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>

编辑：我已经更新了make_canvas函数。 您可以在此小提琴中看到它的工作方式。

如何使用Jquery将脚本标签内部的画布动态添加到HTML

问题描述

1 个解决方案

解决方案1
0 2015-12-26 06:18:34

如何使用Jquery将脚本标签内部的画布动态添加到HTML

问题描述

1 个解决方案

解决方案1 0 2015-12-26 06:18:34

解决方案1
0 2015-12-26 06:18:34