I want to utilize a style sheet from Wikipedia. However, when I fetch the style sheet and attempt to pass the URL retrieved through AJAX to the head of my HTML document, the URL behaves unexpectedly.
Initially, I tried to use the fetched URL directly:
var stylesheetElem = doc.querySelector('head link[rel="stylesheet"]');
Below is the complete code :
<!DOCTYPE html>
<!-- This file is for testing purposes, used to try and display a correctly formatted Wikipedia page -->
<html>
<head>
<meta charset="utf-8"/>
<title>Game Setup</title> <!-- Tab Title -->
<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';
// Fetching the article data
return $.ajax(url).then(function (data) {
doc = (new DOMParser()).parseFromString(data, 'text/html');
// Using 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>
In this instance, the fetched URL is:
<link rel="stylesheet" href="/w/load.php?lang=en&modulening.con...%7Cext.cite.styles&only=styles&skin=vector">
I expected it to include https://en.wikipedia.org/ at the start of the URL like this :
<link rel="stylesheet" href="https://en.wikipedia.org/w/load.php?lang=en&modulening.con...%7Cext.cite.styles&only=styles&skin=vector">
As it didn't, I thought I could add it myself by simply inserting this line of code just before the line
console.log("SHOW stylesheetElem");
stylesheetElem.href = "http://en.wikipedia.org" + stylesheetElem.href
When outputting the stylesheetElem URL, it unexpectedly returns the following URL:
http://en.wikipedia.orgfile//en.wikipedia.org/w/load.php?...kin=vector
What occurred here? Why didn't I receive the correct URL?
http://en.wikipedia.org/w/load.php?...kin=vector