这是我从下面的API调用中得到的。<div id='rg_embed_link_437103' class='rg_embed_link' data-song-id='437103'>Read <a href='https://genius.com/Ed-sheeran-thinking-out-loud-lyrics'>“Thinking Out Loud” by Ed Sheeran</a> on Genius</div> <script crossorigin src='//genius.com/songs/437103/embed.js'></script>
lyricsContainer
确实存在于DOM中,但是当我从API调用中附加歌词时,它只附加了“Read“Thinking Out Loud”by Ed Sheeran on Genius”部分。我想附加整个歌词部分。
async function fetchLyrics(songId) {
let response = await fetch("https://api.genius.com/songs/" + songId + "?text_format=plain&access_token=xxx")
let jsonData = response.json();
let lyricData = await jsonData;
console.log(lyricData.response.song.embed_content);
$(".lyricsContainer").append(lyricData.response.song.embed_content);
}
我试着在一个空白的HTML页面上附加<div id='rg_embed_link_437103' class='rg_embed_link' data-song-id='437103'>Read <a href='https://genius.com/Ed-sheeran-thinking-out-loud-lyrics'>“Thinking Out Loud” by Ed Sheeran</a> on Genius</div> <script crossorigin src='//genius.com/songs/437103/embed.js'></script>
,它确实显示了整个歌词部分。问题是当我试图使用JavaScript附加相同的内容时。
1条答案
按热度按时间juud5qan1#
Genius在其embed.js中使用document.write,因此我们需要做相同的操作或替换write函数
请注意,这些脚本将允许API中的任何代码在您的站点范围内运行。
iframe文档.write
**注意:**由于iframe限制,第一个示例在SO中不起作用,但它在jsfiddle和您的站点中起作用
https://jsfiddle.net/mplungjan/unp2x8v0/
替换文档.write