Electron获取对方URL中的OG标签

要使用 JavaScript 获取对方 URL 中的 OG 标签，你可以使用 fetch 函数来获取对方网页的 HTML 内容，然后使用 DOM 解析器（如 DOMParser）来解析 HTML 并提取 OG 标签的值。

以下是一个示例代码，演示如何获取对方 URL 中的 OG 标签：

1
async function getOGTags(url) {
2
  // 使用fetch函数获取对方网页的HTML内容
3
  const response = await fetch(url)
4
  const html = await response.text()
5
  // 创建DOM解析器
6
  const parser = new DOMParser()
7
  const doc = parser.parseFromString(html, 'text/html')
8
  // 获取OG标签的值
9
  const ogTitle = doc.querySelector('meta[property="og:title"]')
10
  const ogDescription = doc.querySelector('meta[property="og:description"]')
11
  const ogImage = doc.querySelector('meta[property="og:image"]')
12
  // 输出OG标签的值
13
  console.log('Title:', ogTitle.getAttribute('content'))
14
  console.log('Description:', ogDescription.getAttribute('content'))
15
  console.log('Image:', ogImage.getAttribute('content'))
16
}
17
// 调用函数，传入对方URL
18
getOGTags('https://example.com')

在上面的代码中，我们定义了一个 getOGTags 函数，该函数接受一个 URL 作为参数。函数内部使用 fetch 函数获取对方网页的 HTML 内容，并使用 DOMParser 解析 HTML。然后，我们使用 querySelector 方法来选择具有特定属性的 meta 标签，并使用 getAttribute 方法获取标签的属性值。最后，我们将 OG 标签的值输出到控制台。

请注意，由于跨域限制，你可能无法直接从其他域名获取 OG 标签的值。如果需要从其他域名获取 OG 标签，你可能需要使用服务器端代码或 CORS（跨源资源共享）策略来处理跨域请求。

Electron 接入方案：#

获取网站信息在主进程，然后 IPC 通信传递到子进程
获取到网站信息后增加缓存策略（例如以 url 为 key,缓存 100 个链接，超过 100 个删除最久的 50 个）

主进程获取方法 getWebInfo

1
export const getWebInfo = async (url: string) => {
2
  const urlObj = new URL(url)
3
  // 只解析https地址，非下载地址如（.png\.zip）
4
  if (
5
    urlObj.protocol !== 'https:' ||
6
    (urlObj.pathname.includes('.') &amp;&amp;
7
      !(
8
        urlObj.pathname.endsWith('.html') ||
9
        urlObj.pathname.endsWith('.htm') ||
10
        urlObj.pathname.endsWith('.aspx') ||
11
        urlObj.pathname.endsWith('.jsp') ||
12
        urlObj.pathname.endsWith('.php')
13
      ))
14
  )
15
    return { title: '', description: '', image: '', icon: '', site_name: '' }
16
  // 有些以www开头的网址获取不到内容，需要去掉
17
  const urlStrip = normalizeUrl(url, { stripWWW: true })
18
  let res = await axios
19
    .get(urlStrip, {
20
      headers: {
21
        'Content-Type': 'text/html; charset=utf-8'
22
      },
23
      timeout: 5000
24
    })
25
    .catch(() => {
26
      return { data: '' }
27
    })
28
  const $ = cheerio.load(res?.data || '')
29
  const title =
30
    $('meta[property="og:title"]').attr('content') || $('title').text() || $('meta[name="title"]').attr('content')
31
  const description =
32
    $('meta[property="og:description"]').attr('content') ||
33
    $('meta[name="description"]').attr('content') ||
34
    $('#js_content')?.text().slice(0, 100)
35
  const site_name = $('meta[property="og:site_name"]').attr('content')
36
  let image = $('meta[property="og:image"]').attr('content') || $('meta[property="og:image:url"]').attr('content') || ''
37
  image = image.startsWith('http') ? image : ''
38
  let icon = $('link[rel="icon"]').attr('href') || $('link[rel="shortcut icon"]').attr('href') || ''
39
  icon = icon.startsWith('http') ? icon : ''
40
  return { title, description, image, icon, site_name }
41
}

IPC 通信

1
IPC_R2M2R.handle('getWebInfo', async (e, url) => {
2
  return getWebInfo(url)
3
})

渲染进程缓存策略

1
const webInfoMap = new Map()
2
let num = 0
3
// 删除50个
4
const _deleteInfo = () => {
5
  webInfoMap.keys()
6
  webInfoMap.keys().some((item, index) => {
7
    if (index <= 49) {
8
      webInfoMap.delete(item)
9
      return false
10
    }
11
    return true
12
  })
13
  num = 50
14
}
15
export const getUrlInfo = async (url) => {
16
  if (webInfoMap.has(url)) {
17
    return webInfoMap.get(url)
18
  } else {
19
    let info = await window.electronIPC.getWebInfo(url)
20
    if (!webInfoMap.get(url)) {
21
      webInfoMap.set(url, info)
22
      num++
23
    }
24
    if (num === 100) {
25
      _deleteInfo()
26
    }
27
    return info
28
  }
29
}

音乐

音乐

Electron 接入方案：#

音乐

文章目录