Javascript 抓取一个 html5 数据值用作 var

Question

所以我想通过带有隐藏数据的 js 自定义 src，但就是想不出正确的流程来编写它。希望获取 html5 数据 - 以更改 src。任何时候我试图写它都无法获取我的数据 - 使用 Var.

在寻找答案时参考问题 19320436 for var from data

尝试过

<html>
<body>

<p id="test" class="customClass" data-newsrc="https://whosebug.com"></p>

<script>
var value = $('.customClass').data('newsrc');

document.getElementById("test").innerHTML= '<iframe id="myframe" src=""\>\</iframe>';

document.getElementById("myframe").src= value;
</script>
</body>
</html>

有效，但未从页面获取新值

<html>
<body>

<p id="test" class="customClass" data-newsrc="https://whosebug.com"></p>

<script>

var value = "https://whosebug.com/qestions"

document.getElementById("test").innerHTML= '<iframe id="myframe" src=""></iframe>';

document.getElementById("myframe").src= value;
</script>
</body>

Answer 1

首先 select #test 元素，您将不止一次需要它。在不使用 jQuery 的情况下，您可以通过从 dataset 属性.

访问 select data-newsrc 属性

不用在字符串中编写 HTML，而是使用 document.createElement 创建一个新的元素对象，这样可以省去重新 select iframe 的步骤，因为您已经有了参考。

设置 src 后，append iframe 到 test 元素。

const test = document.getElementById('test');
const src = test.dataset.newsrc;
const iframe = document.createElement('iframe');
iframe.src = src;
test.append(iframe);

<p id="test" class="customClass" data-newsrc="https://whosebug.com"></p>

Javascript 抓取一个 html5 数据值用作 var

Javascript grabbbing a html5 data- value to use as a var

html

javascript

var