如何正确获取此样式表并将其包含在我的 html 文档的头部？

Posted 2023-03-11

技术标签:

【中文标题】如何正确获取此样式表并将其包含在我的 html 文档的头部？【英文标题】：How to correctly fetch this stylesheet and include it in the head of my html document? 【发布时间】：2021-07-17 05:20:04 【问题描述】：

我想使用来自 Wikipedia 的样式表。为此，我正在获取此样式表。当试图将使用 ajax 获取的 url 传递到我的 html 文档的头部，检索到的 url 行为异常。

首先，我只是尝试使用获取的 url：

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

这是完整的代码：

<!DOCTYPE html>

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

<html>
<head>  
    <meta charset="utf-8"/>
    <title> game setup </title> <!-- Titre de l'onglet -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
</head>

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

<div class='container'>
    <h1 id="title">MiniWiki</h1>
    <div id="content"></div>
</div>

<script>   
function loadPage() 
    "use strict";
    var url, doc;
    console.log("IN LOADPAGE")
    url = 'https://en.wikipedia.org:443/api/rest_v1/page/html/' + 'Ancient_Egypt';
    // fetch the article data
    return $.ajax(url).then(function (data) 
        doc = (new DOMParser()).parseFromString(data, 'text/html');
        // Use mediawiki content stylesheet
        var stylesheetElem = doc.querySelector('head link[rel="stylesheet"]');      
        console.log("SHOW stylesheetElem");
        console.log(stylesheetElem);     
        $('head').append(stylesheetElem);
        
        //Update content
        var contentElem = document.getElementById('content');
        var $content = $(contentElem).empty();
        Array.from(doc.body.attributes).forEach(function (attr) 
            $content.attr(attr.name, attr.value);
        );
        $content.append(Array.from(doc.body.children));
    );

   
loadPage();
</script>

在这种情况下，获取的url是

<link rel="stylesheet" href="/w/load.php?lang=en&modulening.con...%7Cext.cite.styles&only=styles&skin=vector">

我期待它还会在网址的开头包含 https://en.wikipedia.org/，如下所示：

<link rel="stylesheet" href="https://en.wikipedia.org/w/load.php?lang=en&modulening.con...%7Cext.cite.styles&only=styles&skin=vector">

既然没有，我想我可以通过简单地添加这行代码来自己添加它行前

console.log("SHOW stylesheetElem");

stylesheetElem.href = "http://en.wikipedia.org" + stylesheetElem.href

打印 stylesheetElem url 时，意外返回以下 url：

http://en.wikipedia.orgfile//en.wikipedia.org/w/load.php?...kin=vector

这里发生了什么？为什么我没有得到以下正确的网址？

http://en.wikipedia.org/w/load.php?...kin=vector

【问题讨论】：

【参考方案1】：

圆点 (...) 表示开发人员工具遗漏了部分 url。您复制它而不是真正的网址，当您执行“查看页面源代码”时可以看到：

/w/load.php?lang=en&amp;modules=ext.uls.interlanguage%7Cext.visualEditor.desktopArticleTarget.noscript%7Cext.wikimediaBadges%7Cskins.vector.styles.legacy&amp;only=styles&amp;skin=vector

【讨论】：

我故意让点来避免复制非常长的 url 并希望不要让我的问题超载。但是，如果您认为复制返回的整个 url 会增加清晰度，我会这样做。

以上是关于如何正确获取此样式表并将其包含在我的 html 文档的头部？的主要内容，如果未能解决你的问题，请参考以下文章

Cloud Firestore：如何在我的集合查询中获取文档引用并将其映射为 JSON 值？

如何从 URL 获取值并将其添加为联系表 7 中的隐藏字段

如何从下拉框中获取用户选择的值并将其添加到模型中？ [重复]

如何从另一个工作表中获取单元格值并将其分配给 UDF 的返回值？

如何获取导入的类以更改 main.py 标签样式表的属性 [关闭]

在我的情况下，如何正确获取 scrollView 的 contentSize、zoomScale 和 contentOffset？