js获取页面中所有url

在JavaScript中，获取页面中所有的URL可以通过多种方式实现，主要涉及到DOM（文档对象模型）的操作。以下是一些常见的方法和示例代码：

方法一：获取所有链接（`<a>`标签的`href`属性）

// 获取页面中所有的<a>标签
const links = document.querySelectorAll('a');

// 遍历所有的<a>标签并打印出href属性
links.forEach(link => {
    console.log(link.href);
});

方法二：获取所有图片（`<img>`标签的`src`属性）

// 获取页面中所有的<img>标签
const images = document.querySelectorAll('img');

// 遍历所有的<img>标签并打印出src属性
images.forEach(img => {
    console.log(img.src);
});

方法三：获取所有脚本（`<script>`标签的`src`属性）

// 获取页面中所有的<script>标签
const scripts = document.querySelectorAll('script[src]');

// 遍历所有的<script>标签并打印出src属性
scripts.forEach(script => {
    console.log(script.src);
});

方法四：获取所有iframe（`<iframe>`标签的`src`属性）

// 获取页面中所有的<iframe>标签
const iframes = document.querySelectorAll('iframe');

// 遍历所有的<iframe>标签并打印出src属性
iframes.forEach(iframe => {
    console.log(iframe.src);
});

方法五：获取所有资源链接（包括CSS、字体文件等）

// 获取页面中所有的<link>标签
const links = document.querySelectorAll('link[rel="stylesheet"]');
links.forEach(link => {
    console.log(link.href);
});

// 获取页面中所有的<link>标签（字体文件）
const fonts = document.querySelectorAll('link[rel="preload"][as="font"]');
fonts.forEach(font => {
    console.log(font.href);
});

综合方法：获取页面中所有可能的URL

如果你想获取页面中所有可能的URL，可以结合上述方法，遍历所有可能包含URL的标签：

const allElements = document.querySelectorAll('a, img, script[src], iframe, link[rel="stylesheet"], link[rel="preload"][as="font"]');

allElements.forEach(element => {
    if (element.tagName === 'A') {
        console.log(element.href);
    } else if (element.tagName === 'IMG') {
        console.log(element.src);
    } else if (element.tagName === 'SCRIPT' && element.src) {
        console.log(element.src);
    } else if (element.tagName === 'IFRAME') {
        console.log(element.src);
    } else if (element.tagName === 'LINK' && element.href) {
        console.log(element.href);
    }
});

注意事项

跨域问题：如果页面中包含跨域的资源，浏览器的同源策略可能会限制对这些资源的访问。
动态加载的内容：如果页面中有动态加载的内容（例如通过AJAX加载的脚本或图片），上述方法可能无法获取到这些内容。此时可以考虑使用MutationObserver来监听DOM的变化，并在新内容加载后进行处理。
性能问题：遍历大量DOM元素可能会影响页面性能，特别是在大型页面中。应谨慎使用，并尽量减少不必要的遍历操作。

通过上述方法，你可以获取页面中所有可能的URL，并根据需要进行进一步处理。