Итак, я делаю браузерный эмулятор для своего школьного Chromebook. Многие сайты заблокированы, и каждый может видеть нашу историю, но мне нужна моя конфиденциальность. Я не буду отдавать этот законченный эмулятор, но я хочу, чтобы он был удобен для настройки. Кроме того, я хочу, чтобы мой iframe был в полноэкранном режиме, но каждый раз, когда я пробую учебное пособие по переполнению стека, он не работает. Я всегда получаю какую-то границу наверху. Я использую Chrome для запуска моих HTML-файлов. Вот мой код HTML5, который у меня есть. Любая помощь будет высоко ценится.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Google</title>
<link rel="shortcut icon" href="file:///home/chronos/u-59be51187b1ec64df00154b2375f9ffcad3e4500/MyFiles/NewBing/Files/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="file:///home/chronos/u-59be51187b1ec64df00154b2375f9ffcad3e4500/MyFiles/NewBing/Files/stylesheet.css" />
</head>
<body>
<script type="text/javascript">
function loadUrl() {
document.getElementById('browser').src = document.getElementById("urltxtbox").value;
}
function refreshUrl() {
history.forward();
history.back()
}
</script>
<p>
<input type="text" id="urltxtbox" class="urltxtbox" placeholder="Paste URL">
<input type="button" id="urlRedirect" class="gobtn" value="Go" onclick="loadUrl()">
<input type="button" id="back" class="backbtn" value="⇦" onclick="history.back()">
<input type="button" id="forward" class="forwardbtn "value="⇨" onclick="history.forward()">
<!--<input type="button" id="refresh" class="refreshbtn" value="⟳" onclick="refreshUrl()">-->
</p>
<iframe id="browser">Your browser doesn't support iframes</iframe>
</body>
</html>
Вот моя таблица стилей CSS. Вы можете просмотреть мои атрибуты iframe, а также, пожалуйста, помочь с этой функцией обновления. Любые предложения к любой части страницы будут полезны.
body,html
{
background-color:#DDEEDD;
padding:0px;
margin:0px;
height:100%;
width:100%;
overflow:hidden;
}
iframe
{
display:block;
margin:0;
padding:0;
border:0;
height:100%;
width:100%;
overflow:hidden;
background-color:#DDEEDD;
position:absolute;
}
.urltxtbox
{
font-size:1em;
position:absolute;
top:20px;
left:20px;
z-index:2
}
.gobtn
{
font-size:1em;
position:absolute;
top:20px;
left:265px;
z-index:2;
}
.backbtn
{
font-size:1em;
position:absolute;
top:20px;
left:310px;
z-index:2;
}
.forwardbtn
{
font-size:1em;
position:absolute;
top:20px;
left:355px;
z-index:2
}
.refreshbtn
{
font-size:1em;
position:absolute;
top:20px;
left:400px;
z-index:2;
}