javascript - 如何在 javascript 中设置数据 ID？

Question

我想在用户输入 URL 后设置 data-id，已经尝试了很多我在这里找到的示例，但没有一个有效...

//https://imgur.com/SPrSZV7 im trying with this url
function getUrl() {
  var txt = document.getElementById('txtURL').value;
  var novaURL = txt.replace('https://imgur.com/', '');
  document.getElementById('resultado').innerHTML = novaURL;
  imagem = document.getElementById('imagem').setAttribute('data-id', novaURL);
}

<script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>
<!-- ... -->
<input type="text" id="txtURL">
<input onclick="getUrl()" type="submit">
<h3 id="resultado">Resultado:</h3>
<blockquote id="imagem" class="imgur-embed-pub" lang="en" data-id="">
</blockquote>

data-id 应该是 SPrSZV7，我在控制台中得到错误 Cannot read property 'setAttribute' of null，为什么这为空？

Answer 1

imgur 嵌入库正在加载并使用 iframe 覆盖您的 blockquote，因此您的 ID "imagem" 的 > 在 iframe 加载时消失。尝试用具有 data-id 属性的 div 容器包装 blockquote，并为其设置 data 值引用。或者您可以尝试引用嵌入发生时出现的 imgur iframe ID:'imgur-embed-iframe-pub-' 而不是使用 div包装器。请看下面的例子:

//https://imgur.com/SPrSZV7 im trying with this url
function getUrl() {
  var txt = document.getElementById('txtURL').value;
  var novaURL = txt.replace('https://imgur.com/', '');
  document.getElementById('resultado').innerHTML = novaURL;
  var imagem = document.getElementById('container-for-imgur');
  imagem.dataset.id = novaURL;
  console.log(imagem.dataset.id);
}

<script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>

<input type="text" id="txtURL" value="https://imgur.com/SPrSZV7" />
<input onclick="getUrl()" type="submit" />
<h3 id="resultado">Resultado:</h3>
<div id="container-for-imgur" data-id="">
  <blockquote id="imagem" class="imgur-embed-pub" lang="en" data-id="">
  </blockquote>
</div>