Using mediawiki API to display a wikipedia page as-is - javascript

I would like to use the API to display a wikipedia page as-is on my website.
I found this API which could help but the documentation is limited and I can't figure much on how to use it.
In the user guide they reference a toy wiki browser called miniwiki, I used that as a base for the following code :
<!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>
As you can see if you try it, it returns some 404 errors, the page display some elements correctly, and some not at all. The same issues are present on the Miniwiki, so I wonder how to correct them.

So am I correct to assume you want to display the page exactly as Wikipedia is showing it ? Currently you request that single page, same as https://en.wikipedia.org/wiki/Ancient_Egypt?action=render. Perhaps use an iFrame with the url I mentioned? Would that solve the problem ?
So as an addition to my comment, you could just grab the stylesheet from the url with Ajax. It's already in your code.
For me this works like a charm :
<!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>

Related

Behavior DIFFERS When SCRIPT in STATIC and DYNAMIC

It has an embedded system, which operates with an IP (example: 192.168.0.237) different from each device, where the Import/Load file functionality depends on JQuery. The goal is to get this feature to work without needing an internet connection, it is currently using pointing to https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js and it works without problems.
Changing the code, to access the "jquery.js" file locally.
The page that loads the UPLOAD functionality is operating on port 8989. This, the path can be placed in the HEAD of the files, like this:
<script type='text/javascript' src='jquery.js'></script>
When running, inspecting the NETWORK tab, we have the result path:
"192.168.0.237:8989\jquery.js"
that is, it maps through port 8989, it fails to find the file, as it is stored in the root with port 80. Therefore, to validate the solution FORCE doing:
<script src='http://192.168.0.237/jquery.js'></script>
I added this instruction at the top of the file inside HEAD, AND the file UPLOAD feature WORKED correctly. Validating, which solution is suitable.
But, in order to work correctly, it must obtain the IP of the device, so a SCRIPT was made using "window.location.hostname" to obtain the IP of the device and assemble the URL.
<script>
let k2 = '#http://';
let k3 = window.location.hostname;
let k4 = '#jquery.js';
let fim = `${k2} ${k3} ${k4}`;
fim = fim.replace(' #', '/');
fim = fim.replace('#', ' ');
fim = fim.replace('// ', '//');
fim = fim.trim();
document.getElementById('demo').innerHTML = window.jQuery;
document.getElementById('kkk').innerHTML = fim;
document.head.appendChild(document.createElement('script')).src = fim;
</script>
In this SCRIPT we have the last line "document.head.appendChild(document.createElement('script')).src = fim"
which inserts the statement to load JQuery into the HEAD. Clicking on the "Check JQuery Status" button, the message that JQuery is loaded and available appears.
But now comes the problem, when pressing the submit button, update, the shown below occurs:
Imagem upload1
Imagem upload2
Imagem upload3
In short, an error occurs because it points to "serverIndex:1" and the correct would be only "serverIndex".
In other words, we have the INITIATOR pointing to "serverIndex:1" which doesn't exist (it doesn't even have to adjust the instruction, a syntax error will happen).
So, in short, with statement adding "jquery.js" STATIC = WORKS, but with statement ADDING "jquery.js" DYNAMICLY DOES NOT WORK.
With the STATIC instruction inserted in the HEAD, we have the expected operation as indicated below: (Note the INITIATOR = serverIndex)
WORKS OK RESULT
I need guidance as I don't know how to solve and also if this solution is suitable.
Below is the rendered code:
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script>
function checa() {
if(jQuery) {
alert('Jquery ONLOAD!');
} else {
alert('Jquery NOT HAVE - NUNCA EXECUTA');
}
}
</script>
<script src='http://192.168.0.237/jquery.js'></script>
</head>
<button onclick='checa()'>Check Status JQuery</button>
<form method='POST' action='#' enctype='multipart/form-data' id='upload_form'>
<h4>valor:</h4>
<p id='demo'> </p>
<p id='kkk'></p>
<h3>Verificador de preço</h3>
<h3>Update Firmware</h3>
<input type='file' name='update' id='file' onchange='sub(this)' style=display:none accept='.bin' required>
<label id='file-input' for='file'> Selecione o arquivo ...</label>
<input type='submit' class=btn value='Atualizar'>
<br>
<br>
<div id='prg'></div>
<br>
<div id='prgbar'>
<div id='bar'></div>
</div>
<br>
</form>
<script>
let k2 = '#http://';
let k3 = window.location.hostname;
let k4 = '#jquery.js';
let fim = `${k2} ${k3} ${k4}`;
fim = fim.replace(' #', '/');
fim = fim.replace('#', ' ');
fim = fim.replace('// ', '//');
fim = fim.trim();
document.getElementById('demo').innerHTML = window.jQuery;
document.getElementById('kkk').innerHTML = fim;
document.head.appendChild(document.createElement('script')).src = fim;
</script>
<script> <!-- DOWN IS SCRIPT UPLOAD FILE !-->
function sub(obj) {
var fileName = obj.value.split('\\');
document.getElementById('file-input').innerHTML = ' ' + fileName[fileName.length - 1];
How the code is structured: (it is enclosed in QUOTES because as soon as it is stored in the String)
Code up
Code bottom
Code call String serverIndex
Finally, I hope to be guided on how to resolve the situation and whether this solution is adequate and correct.

Random Image selector from folder

I'm a student working on an art project in which I select one of 500 created images to show up on a webpage. I'm very new to coding and only really understand html and css, with very small amount of knowledge in JavaScript. I'm stuck in getting the images to show up, when I inspect it gives me an error saying: Failed to load resource: net::ERR_FILE_NOT_FOUND $selected_image}< I'm not really sure what to do with this, I hope someone would like to help me with this.
Thankyou :)
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" media="screen" href="css/main.css">
<!-- <link rel="JavaScript" href="script.js"> -->
<meta charset='utf-8'>
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
<title>Mother</title>
<body>
<div id="container">
<div id="inner_container">
<img id="image_shower"/>
</div>
<div id="button_container">
<button onclick="get_random_image()"></button>
</div>
</div>
<script>
image_array = [
'Lilith10.png',
'Lilith11.png',
'Lilith12.png',
'Lilith13.png',
'Lilith14.png']
function get_random_image(){
random_index = Math.floor(Math.random() * image_array.lenght);
selected_image = image_array[random_index]
document.getElementById('image_shower').src = './images/$selected_image}'}
</script>
</body>
</html>
Javascript template strings are written with oblique quotes, and variables inside it must have brackets around them (you only had the closing one):
document.getElementById('image_shower').src = `./images/${selected_image}`;
EDIT
Even if in the present case this won't stop your code from working (unless you activate "strict mode"), I also recommend that you use the appropriate keywords to declare your variables.
const image_array = [
'Lilith10.png',
'Lilith11.png',
'Lilith12.png',
'Lilith13.png',
'Lilith14.png'
];
function get_random_image() {
const random_index = Math.floor(Math.random() * image_array.length);
const selected_image = image_array[random_index];
document.getElementById('image_shower').src = `./images/${selected_image}`;
}

Using javascript on wordpress site to add/modify a link

I currently have an html page where I use javascript to add a link to a different port on the same host, as in the code below.
If I'm on a machine with address 192.168.1.10:8090 the link provided is 192.168.1.10:5000
I'm trying to the same function to a wordpress site, but can't work out how to add javascript and add a link to the page (or reference an existing link).
I've not used wordpress before, so grateful for any help with this.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test Page</title>
</head>
<body>
<div id="ext_link" style="text-align:center">
<script>
window.onload = function(){
var x = location.hostname;
var init = "http://";
var link_stem = x.concat(':5000');
var link_address = init.concat(link_stem);
console.log(link_address);
var a = document.createElement('a');
var linkText = document.createTextNode("Link to Port 5000");
a.appendChild(linkText);
a.title = "LinkToPort5000";
a.href = link_address;
document.getElementById("ext_link").appendChild(a);
};
</script>
</div>
</body>
</html>

Random Href using jquery and colorbox

FYI, I am not at all a programmer so anything will have to spelled out clearly.
I am using this .js script inside sharepoint. It works fine!
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>ColorBox demo</title>
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
</head>
<body>
<h1>Hello, there!</h1>
<h2>This is some content</h2>
<p>The popup will open in five seconds</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<script>
function openColorBox(){
$.colorbox({iframe:true, width:"40%", height:"30%", href: "http://172.16.96.254/pf17.html"});
}
setTimeout(openColorBox, 5000);
setTimeout(parent.$.colorbox.close, 15000);
</script>
</body>
</html>
I have created several Pages on a local internal site. pf1.html - pf21.html
I would like to randomize these when the popup runs.
I have seen this function..posted in this forum.
(Math.random()*11)
How can I add this to the above script and randomize the pages.
This is the full random clip
$(document).ready(function() {
$("a.colorbox").click(function() {
$(this).attr("href","print"+Math.floor(Math.random()*11)+".html");
});
I know the *11 sets the number of pages..
Try something like:
function openColorBox(){
var urlBase = "http://172.16.96.254/pf";
var urlPage = Math.floor(Math.random() * 21);
var urlExt = ".html";
var randomizedURL = urlBase + urlPage + urlExt;
$.colorbox({iframe:true, width:"40%", height:"30%", href: randomizedURL});
}
setTimeout(openColorBox, 5000);
setTimeout(parent.$.colorbox.close, 15000);

Calling .jSignature() on div doesn't update the div

I got this code from the GitHub:
<script src="path/to/jSignature.min.js"></script>
<script>
$(document).ready(function() {
$("#signature").jSignature()
})
</script>
<div id="signature"></div>
But it doesn't pull anything up on the actual webpage. I would think there is more code required but I don't know where to start.
Here is a minimal working example
<!DOCTYPE html>
<html lang="en">
<head>
<lang>
<title>Minimal working jSignature Example</title>
<meta charset="UTF-8">
<!-- Files from the origin -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://willowsystems.github.io/jSignature/js/libs/jSignature.min.js"></script>
<head>
<script>
$(document).ready(function() {
// Initialize jSignature
$("#signature").jSignature();
})
// ripped from the description at their the Github page
function getBase64Sig(){
// get the element where the signature have been put
var $sigdiv = $("#signature");
// get a base64 URL for a SVG picture
var data = $sigdiv.jSignature("getData", "svgbase64");
// build the image...
var i = new Image();
i.src = "data:" + data[0] + "," + data[1];
// and put it somewhere where the sun shines brightly upon it.
$(i).appendTo($("#output"));
}
</script>
<body>
Put your signature here:
<div id="signature"></div>
<button onclick="getBase64Sig()">Get Base64</button>
<div id="output"></div>
</body>
</html>
I hope you can go on from here.
It is really as simple as they describe it to be, only their description of the actual example is a bit lacking for beginners.

Categories

Resources