使用 mediawiki API 按原样显示***页面
Posted
技术标签:
【中文标题】使用 mediawiki API 按原样显示***页面【英文标题】：Using mediawiki API to display a wikipedia page as-is 【发布时间】：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&only=styles&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 上也存在同样的问题，所以我想知道如何纠正它们。
【问题讨论】：
【参考方案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 加上那个就很好看 看起来确实更好，谢谢！我仍然有一些格式问题，有些图片不在好部分。以上是关于使用 mediawiki API 按原样显示***页面的主要内容，如果未能解决你的问题，请参考以下文章