As part of a coding challenge that I came up with, I am building a basic web browser PURELY in html and javascript that can run on a host browser as a data uri. My code is as follows:
data:text/html,<head><title>Basic Web Browser</title></head>
<h1>Basic Web Browser</h1>
Enter Web Address or search terms: <input id="url" type="text"/><input type="button" value="Go" onclick="view();"/><input type="button" onclick="textsearch()" value="Google Search"/><input type="button" onclick="imagesearch()" value="Image Search"/><input type="button" value="Open Google URL" onclick="googleURL();"/><input type="button" value="Edit links" onclick="edit()" id="edit" style="display:none"/><input type="button" value="Iframe" onclick="iframe()"/> <a target="_blank">New Tab</a><br/></p><p style="display:none"><script>window.onerror = function(message, url, linenumber) {
alert('JavaScript error: ' + message + ' on line ' + linenumber + ' for ' + url);
};</script><script>
document.querySelector('a').href = window.location;
function iframe() {
document.querySelector('div').innerHTML='<iframe src="' + document.getElementById('url').value + '" style="width:100%;height:100%"></iframe>';
};
function textsearch() {
document.getElementById('url').value = 'google.com/search?q=' + document.getElementById('url').value;
view();
};
function imagesearch() {
document.getElementById('url').value = 'google.com/images?q=' + document.getElementById('url').value;
view();
};
function redirect() {
document.getElementById('url').value = this.href;
view();
return false;
};
var getLocation = function(href) {
var l = document.createElement("a");
l.href = href;
return l;
};
function edit() {
for (var i = 0; i < Array.from(document.querySelector('div').querySelectorAll('a')).length; i++) {
var tempURL = Array.from(document.querySelector('div').querySelectorAll('a'))[i];
var tempURLEntered = document.getElementById('url').value;
if (tempURLEntered.slice(0,4) != 'http') {
tempURLEntered = 'http://' + tempURLEntered;
};
if (getLocation(tempURL).hostname.length == 0 && tempURL.href.slice(0,4) != 'data') {
tempURL.href = 'http://' + getLocation(tempURLEntered).hostname + tempURL.href;
};
if (tempURL.onclick == null) {
tempURL.onclick = redirect;
} else {
tempURL.onclick = ';redirect()';
};
};
for (var i = 0; i < Array.from(document.querySelector('div').querySelectorAll('img')).length; i++) {
var tempURL = Array.from(document.querySelector('div').querySelectorAll('img'))[i];
alert(tempURL.src);
var tempURLEntered = document.getElementById('url').value;
if (tempURLEntered.slice(0,4) != 'http') {
tempURLEntered = 'http://' + tempURLEntered;
};
if (getLocation(tempURL.src).hostname.length == 0 && tempURL.src.slice(0,4) != 'data') {
tempURL.src = 'https://' + getLocation(tempURLEntered).hostname + tempURL.src;
};
alert(tempURL.src);
};
document.getElementById('edit').style='display:none';
};
function googleURL() {
url = decodeURIComponent(url).slice(decodeURIComponent(url).indexOf('url')+6,decodeURIComponent(url).indexOf('sa')-1);
document.getElementById('url').value = url;
view();
}
function parse(data) {
document.querySelector('div').innerHTML = data;
edit();
document.getElementById('edit').style='';
alert(Array.from(document.querySelector('div').querySelectorAll('img')));
};
function view() {
var url = document.getElementById('url').value;
if (url.slice(18,21) == 'url') {
url = decodeURIComponent(url).slice(decodeURIComponent(url).indexOf('url')+6,decodeURIComponent(url).indexOf('sa')-1);
document.getElementById('url').value = url;
}
fetch('https://corsanywhere.herokuapp.com/' + url).then((response) => response.text()).then((text) => parse(text));
};
</script>
<div allowfullscreen></div>
Please excuse my sloppy code. Anyways, this basic web browser works in iOS Safari, Mozilla Firefox, and Google Chrome. However, the issue occurs when a website attempts to load an external resource. If I have an <img/> tag, for example, and the image source is /the/path/to/image.png, my basic web browser does not know where to look for that image. I attempt to fix this issue with my edit() function, but it does not work very efficiently. Plus, my edit() function can only deal with some links and images, other tags and JavaScript are completely ignored. So how can I change my basic web browser so that other tags and JavaScript can refer to external resources? Please feel free to recommend modifications to my code.
You need to resolve relative URLs with the base url of the address that's being opened. If you look at the documentation of
new URL()you see that you can specify a second base URL. Pass the relative url from the image as the first argument, and the absolute url of the current document you have open as the second.