javascript

Question

我有一个 <td> 标签，里面有一个 url，我想把 <iframe> 放在 url 周围，这样 url 就是显示在像 <iframe src='www.youtube.com'>youtube</iframe>

这样的 iframe 中

html:

<!DOCTYPE html>
<html>
<body>


<td class='vid'>https://www.youtube.com/</td>

<button onclick="myFunction()">iframe</button>

<script>
function myFunction() {
  var x = document.querySelectorAll("td.vid");
  x.outerHTML = "<iframe src=" + x.textContent + "></iframe>";
}
</script>

</body>
</html>

最初，控制台一直返回一个长度为 0 的节点列表。出于某种原因，经过更多测试（我正在使用 Edge）后，控制台不再返回消息。

如何正确获取 td 的 innertext/textcontent 并在其周围放置 iframe？

Answer 1

有几点需要指出。在此处列出的特定示例中，您无法获取元素数据，因为 'td' 元素未附加到 table。您的实际代码可能有所不同。

关于 iframe 包装器，如果您只创建一个 iframe 元素，更改元素的 src 并将其附加到 'td' 元素，对我来说更容易。如果需要，您也可以使用 JS 删除文本。

<!DOCTYPE html>
<html>
<body>

<table>
  <td class='vid'>https://www.youtube.com/</td>
</table>


<button onclick="myFunction()">iframe</button>

<script>
function myFunction() {
  var x = document.getElementsByClassName("vid");
  var xElm = x[0]
  let frame = document.createElement('iframe');
  frame.src = xElm.innerHTML;
//now remove the text
  xElm.innerHTML = "";
//now attache the iframe.
  xElm.append(frame);
}
</script>

</body>
</html> 
``

Answer 2

td 元素必须放在 table 元素中才能工作。

检查这个例子。

function myFunction() {
  var x = document.querySelector(".vid");
  x.outerHTML = "<iframe src=" + x.textContent + "></iframe>";
}

<!DOCTYPE html>
<html>
<body>
  <table>
    <td class='vid'>https://www.youtube.com/</td>
  <table>
  <button onclick="myFunction()">iframe</button>
</body>
</html>

javascript - 围绕 <td> 单元格内容值包装 iframe 标签

javascript - wrap iframe tags around <td> cell content value

iframe

html-table