使用 mediawiki API 按原样显示维基百科页面答案

【问题标题】：Using mediawiki API to display a wikipedia page as-is使用 mediawiki API 按原样显示维基百科页面
【发布时间】：2021-03-14 10:06:57
【问题描述】：

我想使用 API 在我的网站上按原样显示维基百科页面。我找到了this API，这可能会有所帮助，但文档有限，我不知道如何使用它。在用户指南中，他们引用了一个名为 miniwiki 的玩具 wiki 浏览器，我将其用作以下代码的基础：

<!DOCTYPE html>

<!-- testing purpose file, used for trying to print a correctly formatted wikipedia page -->


<html>
    <head>  <!-- Tout ce qui est pas dans le contenu -->
        <title> game setup </title> <!-- Titre de l'onglet -->

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>

        <link rel="stylesheet" href="//en.wikipedia.org/w/load.php?modules=mediawiki.legacy.commonPrint,shared|mediawiki.skinning.elements|mediawiki.skinning.content|mediawiki.skinning.interface|skins.vector.styles|site|mediawiki.skinning.content.parsoid|ext.cite.style&amp;only=styles&amp;skin=vector"/>

    </head>

    <body style="background-color:white;">

        <h1 id="wiki-title">MiniWiki</h1>

        <div id="content"></div>

        <script>
            var contentElem = document.getElementById('content');
            var stylesheetElem = document.getElementById('style');
            var titleElem = document.getElementById('wiki-title');
            var url = 'https://en.wikipedia.org:443/api/rest_v1/page/html/Ancient_Egypt';

            $.ajax(url).then(function (data) {
                var $content = $(contentElem).empty();
                // $(stylesheetElem).remove();

                var doc = (new DOMParser()).parseFromString(data, 'text/html');

                // stylesheetElem = doc.querySelector('head link[rel="stylesheet"]');
                $('head').append(stylesheetElem);

                $(titleElem).text(doc.title.replace(/^User:Cscott\//, '').replace(/_/g, ' '));

                Array.from(doc.body.attributes).forEach(function (attr) {
                    $content.attr(attr.name, attr.value);
                });
                $content.append(Array.from(doc.body.children));  
            });       
        </script>
    </body>
</html>

如您所见，如果您尝试一下，它会返回一些 404 错误，页面显示某些元素正确，而有些则根本不显示。 Miniwiki 上也存在同样的问题，所以我想知道如何纠正它们。

【问题讨论】：

标签： javascript ajax dom mediawiki-api

【解决方案1】：

所以我假设您希望完全按照维基百科显示的方式显示页面是否正确？当前您请求该单页，与https://en.wikipedia.org/wiki/Ancient_Egypt?action=render 相同。也许使用带有我提到的网址的 iFrame？这样能解决问题吗？

因此，作为对我的评论的补充，您可以使用 Ajax 从 url 中获取样式表。它已经在您的代码中。对我来说，这就像一个魅力：

<!DOCTYPE html>

<!-- testing purpose file, used for trying to print a correctly formatted wikipedia page -->

<html>
<head>  <!-- Tout ce qui est pas dans le contenu -->
    <meta charset="utf-8"/>
    <title> game setup </title> <!-- Titre de l'onglet -->
    <base href="//en.wikipedia.org" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>

</head>

<body style="background-color:white;">

<h1 id="wiki-title">MiniWiki</h1>

<div id="content"></div>

<script>
    var contentElem = document.getElementById('content');
    var titleElem = document.getElementById('wiki-title');
    var url = 'https://en.wikipedia.org:443/api/rest_v1/page/html/Ancient_Egypt';

    $.ajax(url).then(function (data) {
        var $content = $(contentElem).empty();
        // $(stylesheetElem).remove();

        var doc = (new DOMParser()).parseFromString(data, 'text/html');

        var stylesheetElem = doc.querySelector('head link[rel="stylesheet"]');
        $('head').append(stylesheetElem);

        $(titleElem).text(doc.title.replace(/^User:Cscott\//, '').replace(/_/g, ' '));

        Array.from(doc.body.attributes).forEach(function (attr) {
            $content.attr(attr.name, attr.value);
        });
        $content.append(Array.from(doc.body.children));
    });
</script>
</body>
</html>

【讨论】：

你是对的。但是，iframe 解决方案对我来说并不好，因为我希望能够与超链接点击等页面内容进行交互，并且由于跨域策略，我无法使用 iframe 来做到这一点。
好吧.. 那么迷你维基代码还不错。转到浏览器中的 api 链接 (en.wikipedia.org:443/api/rest_v1/page/html/Ancient_Egypt)，查看源代码，搜索“样式表”，您会发现与您在代码中使用的样式表不同的样式表。我找到了这个：//en.wikipedia.org /w/load.php?lang=en&modules=mediawiki.skinning.content.parsoid%7Cmediawiki.skinning.interface%7Csite.styles%7Cext.timeline.styles%7Cext.wikihiero%7Cmediawiki.page.gallery.styles%7Cext .cite.style%7Cext.cite.styles&only=styles&skin=vector 加上那个就很好看
看起来确实更好，谢谢！我仍然有一些格式问题，有些图片不在好部分。