获取动态加载的脚本，以便在dom加载后运行

Question

我有一个名为“ opposed_team_boxscore”的数据库字段，其中包含以下javascript小部件：

<script type="text/javascript" src="http://widgets.sports-reference.com/wg.fcgi?css=1&site=br&url=%2Fboxes%2FCHA%2FCHA201506180.shtml&div=div_ChicagoWhiteSoxbatting"></script>

我已经将其加载到我的页面上，如下所示：

$.post(phpPage, {thisDate: dateOfGame}, function(returnedData) {
                var obj = jQuery.parseJSON( returnedData );
                //...some code here
                var str = obj["opposing_team_box_score"];
                var newdiv = document.createElement('div');
                newdiv.innerHTML = str;  
document.getElementById('opposing_boxscore').appendChild(newdiv);
});

该代码可以正确呈现在页面上，但无法运行：

<div id="opposing_boxscore">
                <div><script type="text/javascript" src="http://widgets.sports-reference.com/wg.fcgi?css=1&amp;site=br&amp;url=%2Fboxes%2FCHA%2FCHA201506180.shtml&amp;div=div_ChicagoWhiteSoxbatting"></script></div></div>

我相信这是因为脚本是在dom加载到页面后加载的。

将脚本放在页面上后，如何运行它？ 在jquery中甚至可能吗？

********** EDIT ***************************我基本上放弃了这种方法。 这不是为jquery设置的。 我寻找并找到了可以提供所需数据的api。

Answer 1

$(document).ready(function(){
  // do your stuff
});

DOM准备就绪后，内部代码就会运行。

Answer 2

如果您需要使用SCRIPT标签运行外部javascript，则必须将其插入HEAD标签...

像这样的东西

var head = document.head;
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://widgets.sports-reference.com/wg.fcgi?css=1&site=br&url=%2Fboxes%2FCHA%2FCHA201506180.shtml&div=div_ChicagoWhiteSoxbatting';

head.insertBefore(script,head.firstChild);

好消息是“是”，您可以使用脚本标签动态加载javascript，坏消息是您要加载的javascript使用的是document.write，并且无法从异步方式写入文档加载的外部脚本，除非已明确打开。

Answer 3

请注意，“ http://widgets.sports-reference.com/wg.fcgi?css=1&site=br&url=%2Fboxes%2FCH%E2%80%8C%E2%80%8BA%2FCHA201506180.shtml&div=div_div_ChicagoWhiteSoxbatting “

似乎返回状态码500 Internal Server Error ？

---

尝试在结束<\\/script>处替换转义的结束正斜杠。

$.post("/echo/json/", {
    json: JSON.stringify({
        "opposing_team_box_score": "<script>alert(123)<\/script>"
    })
}, function (returnedData) {
    var str = returnedData["opposing_team_box_score"];
    $("head").append(str);
}, "json"); 

jsfiddle http://jsfiddle.net/99yk0o8L/1/

 var obj = { "opposing_team_box_score":"<script>alert(123)<\\/script>" }; var str = obj["opposing_team_box_score"]; $("head").append(str); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div></div> 

Answer 4

我发现此方法无效。 我继续使用API​​来获取数据，而不是尝试将javascript代码存储在数据库字段中并使其运行。