☰

Wikipedia multi language view

View a Wikipedia entry with two (or more?) languages side by side for comparison and language learning.

当前为 2025-05-26 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name             Wikipedia multi language view
  3. // @name:zh          Wikipedia 多语言浏览
  4. // @namespace        https://userscript.snomiao.com/
  5. // @author           snomiao@gmail.com
  6. // @version          0.0.4
  7. // @description      View a Wikipedia entry with two (or more?) languages side by side for comparison and language learning.
  8. // @description:zh   以并列多语言视角浏览维基百科
  9. // @match            https://*.wikipedia.org/wiki/*
  10. // @match            https://zh.wikipedia.org/zh-*/*
  11. // @grant            none
  12. // @run-at           document-start
  13. // @license          GPL-3.0+
  14. // @supportURL       https://github.com/snomiao/userscript.js/issues
  15. // @contributionURL  https://snomiao.com/donate
  16. // ==/UserScript==
  17. //
  18. // ref:
  19. // [javascript - Resize Cross Domain Iframe Height - Stack Overflow]( https://stackoverflow.com/questions/22086722/resize-cross-domain-iframe-height )
  20. //
  21.  
  22. // const Langs = ['en', 'ja', 'zh', 'de', 'fr', 'es', 'ru', 'it', 'ko', 'pt', 'ar', 'vi', 'pl', 'uk', 'nl', 'sv', 'id', 'fi', 'no', 'tr', 'cs', 'da', 'he', 'hu', 'ro', 'th']
  23. const langs = ['en', 'ja', 'zh'] // modify this to your preferred languages, will be used to load the 2nd language iframe
  24. // 
  25.  
  26. if (location.hash.match("#langIfr")) {
  27.     // iframe code send height
  28.     const sendHeight = () =>
  29.         parent.postMessage?.(
  30.             { langIfr: { height: document.body.scrollHeight } },
  31.             "*"
  32.         );
  33.     window.addEventListener("resize", sendHeight, false);
  34.     window.addEventListener("load", sendHeight, false);
  35.     sendHeight();
  36.     document.head.appendChild(createHtmlElement('<base target="_parent" />'))
  37. } else {
  38.     // parent code recv iframe's height
  39.     const msgHandler = (e) => {
  40.         const setHeight = (height) =>
  41.             height &&
  42.             document.querySelector("#langIfr")?.setAttribute("height", height);
  43.         setHeight(e.data?.langIfr?.height);
  44.     };
  45.     window.addEventListener("message", msgHandler, false);
  46.     // load iframe
  47.     const langLnksGet = () =>
  48.         Object.fromEntries(
  49.             [...document.querySelectorAll("a.interlanguage-link-target")]
  50.                 .map((e) => ({
  51.                     lang: e.getAttribute("lang"),
  52.                     href: e.href,
  53.                     language: e.textContent,
  54.                 }))
  55.                 .map((e) => [e.lang, e])
  56.         );
  57.     const exlangFrameLoad = () => {
  58.         const langLnks = langLnksGet();
  59.         const langIframeLoad = (lang = "en") => {
  60.             if (!langLnks[lang]) return false;
  61.             document.body.setAttribute("style", "width: 50vw");
  62.             document.body.querySelector("#langIfr")?.remove();
  63.             document.querySelector("#sidebarCollapse")?.click();
  64.             const langIfr = Object.assign(document.createElement("iframe"), {
  65.                 id: "langIfr",
  66.                 src: langLnks[lang].href + "#langIfr",
  67.             });
  68.             langIfr.setAttribute(
  69.                 "style",
  70.                 "border: none; position:absolute; left: 50vw; top: 0vh; width: 50vw"
  71.             );
  72.             document.body.appendChild(langIfr);
  73.             return true;
  74.         };
  75.  
  76.         // the load 2st language for current page
  77.         langs.find(lang => langIframeLoad(lang))
  78.     };
  79.     window.addEventListener("load", exlangFrameLoad, false);
  80. }
  81.  
  82. function createHtmlElement(innerHTML= '<span>hello</span>'){
  83.   return Object.assign(document.createElement('div'), {innerHTML}).children[0]
  84. }