javascript 我想在下面附加HTML标记,我从一个API调用收到

p3rjfoxz  于 2023-06-28  发布在  Java
关注(0)|答案(1)|浏览(129)

这是我从下面的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附加相同的内容时。

juud5qan

juud5qan1#

Genius在其embed.js中使用document.write,因此我们需要做相同的操作或替换write函数
请注意,这些脚本将允许API中的任何代码在您的站点范围内运行。

iframe文档.write
**注意:**由于iframe限制,第一个示例在SO中不起作用,但它在jsfiddle和您的站点中起作用

https://jsfiddle.net/mplungjan/unp2x8v0/

const result = `<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>`

let ifrm = document.getElementById('song');
try {
  let ifrWin = ifrm.contentWindow || ifrm.contentDocument.defaultView
  ifrWin.document.write(result);
  ifrWin.document.close();

} catch (e) {
  console.log(e.message)
}

/* does not work
const [html,scriptStr] = result.split('<script');
console.log(html)
const div = document.getElementById('mySong')
div.innerHTML = html;
const scriptSrc = scriptStr.match(/src='(.*?)'/)[1]
console.log(scriptSrc);
const script = document.createElement('script');
script.setAttribute('crossorigin',true)
script.src=`https:${scriptSrc}`;
document.querySelector('head').appendChild(script);
// div.appendChild(script); // does also not work
*/
<iframe id="song"></iframe>

替换文档.write

const result = `<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>`

   
const [html,scriptStr] = result.split('<script');
console.log(html)
const div = document.getElementById('song')
div.innerHTML = html;
const scriptSrc = scriptStr.match(/src='(.*?)'/)[1]
console.log(scriptSrc);
const script = document.createElement('script');
script.setAttribute('crossorigin',true)
script.src=`https:${scriptSrc}`;

const saveWrite = document.write;
document.write = str => div.innerHTML += str;

document.querySelector('head').appendChild(script);
<div id="song"></div>

相关问题