<!doctype html>
<html>
<head>
<script type='text/javascript'>
var eles;
var selectoris='';
function showBelow(ino) {
if (ino.value.indexOf('#') != -1) {
selectoris=decodeURIComponent(ino.value.substring(eval(1 + ino.value.indexOf('#')))).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 != '') {
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:90%;' placeholder='Enter relative URL where hashtag (#) separates a CSS selector (eg. About_Us.html#div)) that gets a red dashed border 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>