前端实现八爪鱼采集页面的功能

将一个外部的网站展示的我自己的页面,然后我可以随机点击网站的元素并获取元素的信息,请问有什么方法和工具可以实现, iframe可行吗?

可以考虑使用 iframe 和 JavaScript 来实现:

  1. 使用 iframe:可以在你的页面中嵌入一个 iframe 元素,并将外部网站的 URL 设置为 iframe 的 src。这样可以在你的页面中显示外部网站的内容。注意,使用 iframe 可能会受到浏览器的安全策略限制,具体取决于外部网站的设置和浏览器的配置。

  2. 使用 JavaScript 操作 iframe 内部内容:一旦外部网站的内容在 iframe 中加载完毕,你可以使用 JavaScript 来操作 iframe 内部的 DOM,包括随机点击网站元素以及获取元素的信息。通过在 onload 事件中监听 iframe 的加载完成,然后使用 iframe.contentDocument 来访问 iframe 内部的 DOM,并使用 JavaScript 操作相关元素。

不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 你可以看下这个问题的回答https://ask.csdn.net/questions/735106
  • 这篇博客也不错, 你可以看下iframe子页面获取父页面的点击事件
  • 除此之外, 这篇博客: 首发|微前端专场笔记中的 大型系统为什么不考虑iframe? 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:
    • 加载延迟
    • 用户子应用返回时直接回到Home页
    • 说白了就是用户体验和UI显示不太好

  • 以下回答来自chatgpt:

    解决方案:

    要实现将一个外部网站展示在自己的页面上,并能够随机点击网站元素并获取元素信息的功能,可以使用以下方法和工具:

    1. 使用iframe标签嵌入外部网站:可以使用iframe标签的src属性,将外部网站的链接作为src的值,来引入外部网站的页面内容到自己的页面中。
    <div align="center" style="margin:0 auto;">
      <div style="width:100%;height:600px;overflow:hidden;border:0px"> 
        <div style="margin:-122px 0px 0px -10px;position:relative">
           <iframe src="http://外部网站的链接" id="iframeElement" scrolling="no" frameborder="0"
              style="position:absolute;
                  width: 100%;
                  height: 100vh;
                  display:block;
                  left: 0;
                  right:0;">
            </iframe>
        </div>
      </div>
    </div>
    
    1. 设置点击事件:通过Javascript来添加点击事件监听器,以实现随机点击网站元素的功能。
    // 获取iframe元素
    const iframe = document.getElementById('iframeElement');
    // 如果iframe内容加载完毕,就可以通过contentWindow属性获取其内部document对象
    iframe.onload = function() {
       // 获取iframe内部的document对象
       const iframeDocument = iframe.contentWindow.document;
       // 添加点击事件监听器
       iframeDocument.addEventListener('click', function(event) {
           // 在这里处理点击事件,可以获取点击的元素信息
           const clickedElement = event.target;
           // 处理获取到的元素信息
           // ...
       });
    };
    

    请注意,由于涉及跨域问题,所以被嵌入的外部网站必须与自己的页面处于同一域名或允许跨域访问。

    以上是使用前端技术实现八爪鱼采集页面功能的解决方案,通过嵌入外部网站的方式展示页面,并使用Javascript监听点击事件来获取元素信息。由于涉及到页面布局等问题,需要根据具体情况进行调整和优化。


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^