<!doctype html>
<html>
<head>
<script type='text/javascript'>

var eles;
var selectoris='';
var selectorplusis='';
var froms=[];
var tos=[];

function ourdecodeURIComponent(xin) {
return xin;
}

function showBelow(ino) {
if (ino.value.indexOf('#') != -1) {
if (ourdecodeURIComponent(ino.value.substring(eval(1 + ino.value.indexOf('#'))).replace(/NO\%WAY/g, 'NO%25WAY')).indexOf('{') != -1) {
selectorplusis=ourdecodeURIComponent(ino.value.substring(eval(1 + ino.value.indexOf('#'))).replace(/NO\%WAY/g, 'NO%25WAY'));
}
selectoris=ourdecodeURIComponent(ino.value.substring(eval(1 + ino.value.indexOf('#'))).replace(/NO\%WAY/g, 'NO%25WAY')).split('{')[0].trim();
}
if (ino.value.trim() != '') {
document.getElementById('myh1').style.opacity='0.01';
document.getElementById('myh3').style.opacity='0.01';
document.getElementById('myinput').style.opacity='0.01';
if (ino.value.split('#')[0].trim() == '') {
document.getElementById('ifgoeshere').innerHTML="<iframe onload='checkif(this);' style='position:absolute;top:0px;left:0px;width:100%;height:100%;z-index:7;' src='" + document.URL + "'></iframe>";
} else {
document.getElementById('ifgoeshere').innerHTML="<iframe onload='checkif(this);' style='position:absolute;top:0px;left:0px;width:100%;height:100%;z-index:7;' src='" + ino.value.split('#')[0].trim() + "'></iframe>";
}
}
}

function checkif(iois) {
var ij;
if (iois != null) {
var aconto = (iois.contentWindow || iois.contentDocument);
if (aconto != null) {
if (aconto.document) { aconto = aconto.document; }
if (selectoris != '') {
if (selectorplusis != '') {
aconto.body.innerHTML+=' <style> ' + selectorplusis + '</style> ';
if (selectorplusis.indexOf(' BORDER') != -1) {
eles=aconto.querySelectorAll(selectoris);
for (ij=eval(-1 + eles.length); ij>=0; ij--) {
froms.push(eles[ij].outerHTML);
tos.push('<a onclick="alert(this.innerHTML);" style="cursor:pointer;text-decoration:none;" title="Border clickable">' + eles[ij].outerHTML + '</a>');
}
for (ij=0; ij<froms.length; ij++) {
aconto.body.innerHTML=aconto.body.innerHTML.replace(froms[ij], tos[ij]);
}
}
} else {
eles=aconto.querySelectorAll(selectoris);
for (ij=0; ij<eles.length; ij++) {
eles[ij].style.border='1px dashed red';
}
}
}
}
}
}

</script>
</head>
<body onload="document.getElementById('myinput').focus();">
<h1 id=myh1>Testing out document.querySelectorAll</h1>
<h3 id=myh3>RJM Programming - January, 2021</h3>
<input id=myinput style='width:99%;' placeholder='Enter relative URL where hashtag (#) separates some CSS selector (or more) ( eg. About_Us.html#div { BORDER-radius: 50%; } )) (that uppercase border makes it clickable) that defaults a red dashed border (if just selector) applied to it' type='text' value='' onblur='showBelow(this);'></input>
<div id=ifgoeshere></div>
<input type=text style='position:absolute;left:-200px;top:-200px;' value=''></input>
</body>
</html>