在页面上将嵌入 URL (iframe) 显示为字符串

Question

我正在尝试为访问者提供一种复制视频 (youtube) 嵌入的方法 URL。但当然，当我将嵌入字符串添加到我的页面时，它实际上嵌入了视频。我尝试对 URL 进行编码，但显示了构成特殊字符的字符。

这是我目前拥有的：

<div id="intro_url">%3Ciframe+width%3D%22560%22+height%3D%22315%22+src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2xxxxxxxxg%22+frameborder%3D%220%22+allow%3D%22autoplay%3B+encrypted-media%22+allowfullscreen%3E%3C%2Fiframe%3E</div>

我希望用户会看到类似这样的内容：

<iframe width="560" height="315" src="https://www.youtube.com/embed/TnxxxxxxXg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

但他们得到的是 html 编码版本。

问题：是否可以在不向页面实际添加 iframe 的情况下显示 iframe URL？

Answer 1

对于您的用例，只需将文字字符 < 和 >（这是 signals/triggers html 对标签的解析）替换为 html 这些字符的实体（即 < 和 $gt;）

运行下面是我的代码片段，您会看到它呈现了我们希望用户复制的原始字符串。（如果您尝试将其复制到 html 页面，您会看到嵌入的 YouTube 视频如我们所料出现）

&lt;iframe width="560" height="315" src="https://www.youtube.com/embed/TnxxxxxxXg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen&gt;&lt;/iframe&gt;

在页面上将嵌入 URL (iframe) 显示为字符串

Show embed URL (iframe) as a string on page

html

urlencode

url-encoding