我想在用户输入 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
,为什么这为空?
最佳答案
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>
关于javascript - 如何在 javascript 中设置数据 ID?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55956738/