使用mediawiki API按原样显示wikipedia页面
使用mediawiki API按原样显示wikipedia页面
提问于 2020-12-02 20:36:54
我想使用API在我的网站上按原样显示维基百科页面。我找到了this API，它可以提供帮助，但文档有限，我不知道如何使用它。在用户指南中，他们引用了一个名为miniwiki的玩具维基浏览器，我将其用作以下代码的基础：
<!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
Stack Overflow用户
发布于 2020-12-10 05:11:01
那么，我假设您想要显示与Wikipedia显示完全相同的页面，是正确的吗？当前您请求的是单个页面，与https://en.wikipedia.org/wiki/Ancient_Egypt?action=render相同。也许将iFrame与我提到的url一起使用？这能解决问题吗？
因此，作为我的评论的补充，您可以使用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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65108237
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号