Question

您如何获取嵌入网页的所有对象的网址（或仅仅是主机名）？你会使用哪种标签属性组合？（或其他什么？）

例如，Stackoverflow页面就像

一样启动

<!DOCTYPE html>
<html>
<head>

<title>Stack Overflow</title>
    <link rel="shortcut icon" href="//cdn.sstatic.net/stackoverflow/img/favicon.ico?v=4f32ecc8f43d">
    <link rel="apple-touch-icon image_src" href="//cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png?v=c78bd457575a">
[...]   
    <meta property="og:image" itemprop="image primaryImageOfPage" content="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded&a" />

此处，网址//cdn.sstatic.net/stackoverflow/img/favicon.ico?v=4f32ecc8f43d和//cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png?v=c78bd457575a位于href属性中，而http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded&a位于content属性中。此外，图片和脚本具有src属性。

images HTMLCollection将是一个起点，但DOM规范建议

不要使用此属性来查找文档中的图像，getElementsByTagName

要考虑的Tags.attribute组合：a.href，img.src，link.href，script.src和meta.content。还有哪个？

这是一种方法给定正确的标签组合。这是锚标记的一个示例：

var urls = [];
var allA = document.getElementsByTagName("A");
for ( var i = 0; i < allA.length; i++ ) {
    if ( typeof allA[i].href === "string" && allA[i].href !== "" ) {
      urls.push(allA[i].href);
    }
}

可以对所有标签属性组合重复此操作。

我错过哪些属性标记？

Answer 1

标记<a>和<meta>过多：<a>元素未嵌入，<meta>显示某些网址，但未嵌入。因此，尝试看起来像

function getAttributeFromTags(tag, attribute) {
  var out = [];
  var allA = document.getElementsByTagName(tag);
  for (var i = 0; i < allA.length; i++) {
    if (typeof allA[i][attribute] === 'string' && allA[i][attribute] !== '') {
      out.push(allA[i][attribute]);
    }
  }
  return out;
}
var urls = [];
Array.prototype.push.apply(urls, getAttributeFromTags('AUDIO', 'src'));
Array.prototype.push.apply(urls, getAttributeFromTags('EMBED', 'src'));
Array.prototype.push.apply(urls, getAttributeFromTags('IMG', 'src'));
Array.prototype.push.apply(urls, getAttributeFromTags('LINK', 'href'));
Array.prototype.push.apply(urls, getAttributeFromTags('OBJECT', 'data'));
Array.prototype.push.apply(urls, getAttributeFromTags('SCRIPT', 'src'));
Array.prototype.push.apply(urls, getAttributeFromTags('SOURCE', 'src'));
Array.prototype.push.apply(urls, getAttributeFromTags('VIDEO', 'src'));

买者

使用link.href包含的网址过多（f.ex.查看了view-source：https://www.youtube.com/watch?v=kPUglMKGXRM（SO不允许查看源链接...）。

实施

HTMLCollection不提供forEach，（除了语法奇怪），并且the workarounds不受广泛支持。

HTML页面中所有嵌入对象的URL

1 个答案:

买者

实施