有没有一种方法可以在网站中嵌入和样式化维基百科文章？

Question

我想做的基本上是一个div元素，其中包含维基百科文章的打印友好版本。我使用iframe来嵌入文章，虽然它可以工作，但我无法样式化文档。我猜这是因为iframe内容不在我的域上，我没有编辑权限。是否有一种方法在加载iframe后对内容应用CSS样式？

- ifthisthenthat

---

使用服务器端脚本下载它，修改CSS路径等内容，将结果插入您的页面中。 - Cheery

谢谢。不幸的是，我缺乏进行服务器端下载所需的知识。您会使用PHP吗？ - ifthisthenthat

PHP，Perl，Python等任何可以在服务器端运行的语言。甚至可以通过wget + bash来运行。 - Cheery

这个怎么样？https://embed.ly/provider/wikipedia（第三方服务） - andilabs

Answer 1

您可以使用AJAX通过自定义查询字符串参数调用维基API来实现此操作。

演示 http://jsfiddle.net/fm0vxg32/

JS

$(document).ready(function(){

    $.ajax({
        type: "GET",
        url: "http://en.wikipedia.org/w/api.php?action=parse&format=json&prop=text&section=0&page=Jimi_Hendrix&callback=?",
        contentType: "application/json; charset=utf-8",
        async: false,
        dataType: "json",
        success: function (data, textStatus, jqXHR) {

            var markup = data.parse.text["*"];
            var blurb = $('<div></div>').html(markup);
            $('#article').html($(blurb).find('p'));

        },
        error: function (errorMessage) {
        }
    });
});

CSS

#article {
  // custom styling
}

- Kevin Lynch

---

contentType: "application/json; charset=utf-8" - 你没有进行POST或PUT请求，因此没有请求正文来描述内容类型。 async: false 在HTTP请求时阻止所有JS，99.99％的情况下，这是一个可怕的想法。 - Quentin

哇，这是迄今为止最简单和最好的解决方案。虽然似乎API只给我页面的介绍文本。在设置中是否可以更改此行为？ - ifthisthenthat

正如@Quentin所提到的，几乎没有使用async: false的用例。使用旋转器，在内容可用时淡入内容或通知用户发生了某些事情。除此之外，这是一个有用的答案。 - nietonfir

我注意到当我在URL中更改section=0时，可以加载文章的不同段落。是否有一种方法可以加载整篇文章？ - ifthisthenthat

@YuliyanIlev：只需省略 section 参数即可。 - Bergi

2019年更新：将URL从“http”更改为“https”，这样Chrome就不会因为连接不安全而阻止请求，如果您正在使用SSL加密（如在jsfiddle上）。 - cheesetor