Ich möchte eine kleine Browser-HTML-Seite erstellen. Grundsätzlich möchte ich einen Browser rein aus HTML machen.So erstellen Sie einen HTML-Browser mit iframe
Meiner Meinung nach kann es getan werden. Alles, was ich brauche, ist eine einfache Browser-Adressleiste und vielleicht Tabs.
Der erste Teil kann einfach durchgeführt werden - mit einem iframe und einem Eingabefeld. ich bereits den Code haben hier:
<script>
(function(d){
var init = function(){
var form = d.getElementById("my_form"), input = d.getElementById("url"), iframe = d.getElementById("browser");
form.addEventListener("submit", function(e){
var val = input.value;
if(val) {
iframe.src = "//" + val;
console.log(val);
}
e.preventDefault();
}, false);
};
d.addEventListener("DOMContentLoaded", init, false);
})(document);
</script>
<form method="post" target="browser" id="my_form">
<input style="width:120%;" placeholder="Put the website here (eg. "example.org")" name="url" id="url" type="text" />
<input style="width:8%;" name="submit" type="button" value="Go" />
<iframe name="browser" frameBorder="0" id="browser" src="" style="height:100%; width:100%"></iframe>
EDIT: die Frage nach google einfach aus Neugier war. Unten ist die Frage, die ich beantwortet haben möchte!
Ich könnte leicht das Eingabefeld am oberen Rand der Seite als eine Adressleiste scheinen, nur die Registerkarte Problem. Ich weiß, dass es möglich ist, Tabs mit jQuery zu erstellen (was nicht meine Stärke ist). Wie kann ich Tabs öffnen und schließen? (Wie in einem tatsächlichen Webbrowser)
Auch, ich bin nicht besorgt über die Tatsache, dass einige Websites nicht in der iframe angezeigt werden - das soll zu Demonstrationszwecken dienen, also bitte mach dir keine Sorgen über die "Gültigkeit" meiner Idee/Code.
Danke!
Kontrolle der Ausgabe der Konsole und Sie werden sehen, dass Google selbst – SoluableNonagon
alles blockiert Iframes, werden nicht erlaubt zu iframes funktioniert nicht in Ihrem "Browser", wie Google-Eigenschaften, die den Header xframeoptions verwenden, aber es gibt auch andere Techniken. ein weiteres Problem mit der Idee ist, dass Sie keine Möglichkeit haben, die URL-Leiste von einem Link Klick wegen SOP – dandavis
zu aktualisieren Es kann getan werden, aber es gibt einige Probleme, die Sie einfach nicht in der Lage sein werden zu beheben, wie die Sie gefunden und FrameBusters das haben framebusterbusters. –