如何使用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