如何从网站嵌入特定的 HTML 元素？答案

【问题标题】：How to embed a specific HTML element from a website?如何从网站嵌入特定的 HTML 元素？
【发布时间】：2016-01-06 19:06:44
【问题描述】：

我正在尝试创建一个网站，我可以将其存储在我的本地计算机上并从该计算机的互联网浏览器访问。在这个网站上，我想嵌入来自其他几个网站的元素。我已经能够嵌入整个网站，但不能嵌入特定元素。

如何仅嵌入网站中的特定元素，我需要做什么？

有问题的网站是http://xkcd.com，我想嵌入当天的漫画和漫画标题，我认为它们分别在元素<div id "comic">和<div id "ctitle">中。

【问题讨论】：

嗨！我建议阅读一些basic HTML tutorials。至于您的具体问题，您可以右键单击您想要的图像并选择“复制图像地址”，然后将其粘贴到 <img> 标记中，如下所示：<img src="http://imgs.xkcd.com/comics/douglas_engelbart_1925_2013.png">
哦，等等，你的意思是加载当天的漫画，而不是特定的漫画。也许这会有所帮助：stackoverflow.com/questions/3272071/…

标签： javascript jquery html

【解决方案1】：

这段代码片段完全符合我的要求

<h1 id="xkcd"></h1>

<script>

  function callback(data) {

    let comicPattern = new RegExp('<div id="comic">[^]*?<\/div>', 'gm');
    console.log(comicPattern);
    let comic = data.contents;
    console.log(comic);
    let newComic = comic.match(comicPattern);
    console.log(newComic);
    let filePattern = new RegExp('\/\/', 'g');
    let httpPattern = 'http://';
    let newComicFiltered = newComic[0].replace(filePattern, httpPattern);
    console.log(newComicFiltered);
    document.querySelector('#xkcd').innerHTML = newComicFiltered;

  }

</script>

<script type="text/javascript" src="http://allorigins.me/get?url=https%3A//xkcd.com&callback=callback"></script>

【讨论】：

【解决方案2】：

我相信您正在寻找的是iframe，您可以在这里了解所有相关信息：http://www.w3schools.com/tags/tag_iframe.asp

下面的代码应该是你需要的，我添加了对包含漫画的页面元素的id的引用到URL（即：'https://www.xkcd.com/#comic' ) 以便 iframe 只显示图片，而不是整个页面。

&lt;iframe scrolling="no" height="380" src="https://www.xkcd.com/#comic"&gt;&lt;/iframe&gt;

【讨论】：

2个问题，这适用于任何大小的漫画吗？你也能得到漫画的标题吗？
@JesseMcDonald 如果你想包含漫画标题，你可以做同样的事情并制作另一个 iframe，但不是引用 #comic，而是引用标题的 id，它似乎被命名为 @ 987654328@。通常，我建议检索所有图片及其名称并相应地显示它们，这可以通过一些编程来完成（这样你就不必担心大小），但不幸的是，该网站的所有者出现了要限制对包含漫画的文件夹的访问，您可以在此处看到：imgs.xkcd.com/comics，该链接返回 404。