javascript - 使用 eval 动态执行带有外部 src 属性的 <script> 标签

Question

我正在使用 Genius API检索给定歌曲的歌词并将其嵌入到 HTML 中 <div>标签。我正在使用 PHP 通过 AJAX GET 请求与此 API 进行交互。

如果 AJAX 请求成功，我会从我的 PHP 中检索以下 HTML:

<div id='rg_embed_link_2351532' class='rg_embed_link' data-song-id='2351532'>
    Read <a href='https://genius.com/The-1975-the-sound-lyrics'>“The Sound” by The 1975</a> on Genius
</div> 
<script crossorigin src='//genius.com/songs/2351532/embed.js'></script>

Genius API返回的脚本标签在执行时会嵌入歌词及歌词信息。

我正在尝试将此 HTML 导入到我现有的 <div> 中.在这种情况下，<script>部分不会执行。我试过使用 eval()在我的 AJAX 的“成功”功能中动态执行此脚本，但我没有成功:

$.ajax({
    url: 'lyrics.php',
    type: 'GET',
    async: true,
    success: function(success){
        geniusHTML = success;

        //Insert geniusHTML including script tag into div
        var lyricsDiv = document.getElementById("lyricsDiv");
        lyricsDiv.innerHTML = geniusHTML;

        //Get the script tag from the html and use eval on it
        var innerScript = lyricsDiv.getElementsByTagName('script')
        eval(innerScript.outerHTML);
    }
});

我试过评估:

• .outerHTML -- 控制台显示此值为:<script crossorigin="" src="//genius.com/songs/2351532/embed.js"></script>
• .innerHTML -- 属性似乎是空的。
• .src -- 控制台显示此值为:http://genius.com/songs/2351532/embed.js . eval()关于 Uncaught SyntaxError: Unexpected end of input 的函数错误.

我觉得我可能在倒退。我是否应该在将脚本添加到 div 之前执行 AJAX 返回的脚本？？ (脚本会生成不少嵌入的div标签)

编辑

在回答者 Sjoerd de Wit 的指导下，我尝试从源标签的 src 创建一个新的脚本标签。属性，并通过 document.head.appendChild 添加。这没有用，提供警告:

Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

Answer 1

您应该从脚本标签中获取 src 并在您的 html 中动态创建和加载它

var script = document.createElement("script");  
var innerScript = lyricsDiv.getElementsByTagName('script')
script.src = innerScript.src; 

document.head.appendChild(script);