So, I have some HTML
where I use an iframe element. I don't like the title bars, so I went to go inspect the html in google chrome. I can delete them by working my way through the iframe element, and get to a div element labeled there as #titlebar. I have seen the stack exchange question here, but the methods explained there don't work. You can edit the iframe element through Google Chrome, but I want to use jQuery to automatically delete the element the instant the page loads. Here's my HTML, by the way:
<html style="background-color: #000000;"><head>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<title>Apple Macintosh II</title>
<link rel="shortcut icon" href="https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Apple_Computer_Logo_rainbow.svg/858px-Apple_Computer_Logo_rainbow.svg.png" width="20" height="20">
<style type="text/css">
html {
overflow: auto;
}
html,
body,
div,
iframe {
margin: 0px;
padding: 0px;
height: 100%;
border: none;
}
iframe {
display: block;
width: 100%;
border: none;
overflow-y: auto;
overflow-x: hidden;
}
</style>
</head>
<body>
<iframe src="http://jamesfriend.com.au/pce-js/" frameborder="0" marginheight="0" marginwidth="0" width="125%" height="125%" scrolling="auto">
</iframe>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script>
$("iframe").removeChild("#titlebar");
</script>
</body></html>