欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 文旅 > 旅游 > 前端操作document的小方法,主要功能-获取当前页面全部的a标签页,并根据链接中必要的字段进行判断,然后把这些链接放入iframe去打开

前端操作document的小方法,主要功能-获取当前页面全部的a标签页,并根据链接中必要的字段进行判断,然后把这些链接放入iframe去打开

2025/4/15 20:38:46 来源:https://blog.csdn.net/Shi_haoliu/article/details/147229804  浏览:    关键词:前端操作document的小方法,主要功能-获取当前页面全部的a标签页,并根据链接中必要的字段进行判断,然后把这些链接放入iframe去打开

首先是一些小方法,有一个问题就是在不同源的页面中无法获取iframe中的dom

const isInIframe = window.parent !== window.self;
console.log('是否在 iframe 中:', isInIframe);
console.log('来源页面:', document.referrer);
const isSame =new URL(document.referrer).origin === window.location.origin;
console.log(isSame, '是否同源');

js原生版本-获取当前页面中所有符合要求的a标签

   window.addEventListener('load', function (){console.log(window.localStorage.getItem('username'));// 存储已处理的<a>标签,避免重复检查const processedLinks = new WeakSet();// 存储符合条件的链接const matchedLinks = new Set();// 解析URL并检查参数function checkLink (link){try {const url = new URL(link.href);const params = url.searchParams;const keys = new Set(Array.from(params.keys(), key => key.toLowerCase()));if (keys.has('需要匹配的参数字段') && keys.has('需要匹配的参数字段')) {matchedLinks.add(url.href);}} catch (e) {console.error('解析URL失败:', link.href, e);}}// 收集并检查所有<a>标签function collectLinks (){const links = document.getElementsByTagName('a');for (const link of links) {if (!processedLinks.has(link)) {processedLinks.add(link);checkLink(link);}}// 输出结果(可根据需要调整)if (matchedLinks.size > 0) {console.log('匹配的链接:', Array.from(matchedLinks));}}// 初始收集collectLinks();// 监听DOM变化以处理动态加载的内容const observer = new MutationObserver(function (mutations){collectLinks();});observer.observe(document.body, {childList: true,   // 监听子元素变化subtree: true      // 监听所有后代元素});});

vue2版本-获取当前页面中所有符合要求的a标签

export default {
data() {return {processedLinks: new WeakSet(), // 非响应式,仅用于逻辑判断matchedLinks: [], // 响应式数组,用于存储结果observer: null, // 存储 MutationObserver 实例};
},
beforeDestroy() {// 组件销毁时断开观察if (this.observer) {this.observer.disconnect();}},mounted() {const isInIframe = window.parent !== window.self;console.log('是否在 iframe 中:', isInIframe);console.log('来源页面:', document.referrer);const isSame =new URL(document.referrer).origin === window.location.origin;console.log(isSame, '是否同源');if (isInIframe) return; //不能再iframe里面再打开iframe了,会死循环let _this = this;window.addEventListener('load', function () {_this.initLinkCollector();});},methods: {initLinkCollector() {this.collectLinks();this.setupMutationObserver();this.goiframeLink()console.log(this.matchedLinks);},checkLink(link) {try {const url = new URL(link.href);const params = url.searchParams;const keys = new Set(Array.from(params.keys(), (key) => key.toLowerCase()));if (keys.has('需要匹配的参数字段') && keys.has('需要匹配的参数字段')) {// 使用 Set 结构去重后转为数组更新const newSet = new Set([...this.matchedLinks,url.href]);this.matchedLinks = Array.from(newSet);}} catch (e) {console.error('解析URL失败:', link.href, e);}},collectLinks() {const links = document.getElementsByTagName('a');Array.from(links).forEach((link) => {if (!this.processedLinks.has(link)) {this.processedLinks.add(link);this.checkLink(link);}});},setupMutationObserver() {this.observer = new MutationObserver((mutations) => {this.collectLinks();});this.observer.observe(document.body, {childList: true,subtree: true,});},}
}

在当前页用iframe循环打开获取的a标签

	goiframeLink() {console.log(this.matchedLinks);var finalUrl = this.matchedLinks;// 带随机参数避免缓存// console.log(finalUrl);// this.beaconCount = 0;this.beaconTimer = setInterval(() => {try {// console.log(this.beaconCount);var url = finalUrl[this.beaconCount];// console.log(url);// 使用iframe跳转this.$refs.beaconFrame.src = url;this.beaconCount++;// 自动清理防止内存泄漏if (this.beaconCount % 20 === 0) {this.$refs.beaconFrame.contentWindow.location.reload();}if (this.beaconCount == finalUrl.length) {this.beaconCount = 0;}} catch (e) {// console.error(':', e);}}, 10000);},

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词