是否可以插入和运行动态脚本标记？

Question

I have the following code in a cljs file:

(def template 
    "<script type=\"text/javascript\">
      console.log(\"The script was run\");
    </script>")

(defn add-script []
  (let [s (js/document.createElement "div")]
    (set! (.-innerHTML s) template)
    (js/document.head.appendChild (.-firstChild s))))

(Obviously, the real script template's content is different than this, but this illustrates the problem)

When I look in the document after add-script has been run, sure enough, the script template has been inserted into the code. The problem is that the code has not actually been executed. If this were just js, I would simply eval the template. However, Clojurescript does not have eval, so I thought I would try dynamically adding the content of the javascript template using a script tag.

How can I get this to work, specifically, how can I get these content of my script template to evaluate after I have dynamically inserted it?

Answer 1

I've done something similar with this code

(let [the-head js/document.head
      the-script (.createElement js/document "script")
      the-script-value "console.log(\"The script was run\");"
      ]
  ; if you need to load a js file
  ;(set! (.-type the-script) "text/javascript")
  ;(set! (.-src the-script) "url_file")
  (set! (.-innerHTML the-script) the-script-value)  
    (.appendChild the-head the-script)
  )

I hope it helps you

Answer 2

(def template 
    "<script type=\"text/javascript\">
      console.log(\"The script was run\");
    </script>")

(defn add-script []
  (let [e (js/document.createElement "script")
        t (subs template 32 (- (count template) 14))]
    ;; t -> "      console.log(\"The script was run\");"
    (set! (.-text e) t)
    (js/document.head.appendChild e)))

Works. I am actually quite surprised that this innerHTML behavior causes the code to not load. Seems inconsistent and does not make a great deal of sense to me.

I would also appreciate a proper Clojurescript regular expression for grabbing the content in my script tag. I couldn't seem to find a working example of actually using regular expressions in cljs.