Question

I'd like to make a small browser-type HTML page. Basically, I'd like to make a browser purely out of HTML.

In my opinion, it can be done. All I need is a simple browser- address bar, and maybe tabs.

The first part can be accomplished easily- using an iframe and an input field. I already have the code here:

    <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. &quot;example.org&quot;)" 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: THe question about google was simply out of curiosity. Below is the question I want answered!

I could easily affix the input field to the top of the page to seem like an address bar, leaving only the tab issue. I know it's possible to have tabs using jQuery(which is not my strong suit)- however, how can I open and close tabs? (Like in an actual web browser)

Also, I'm not concerned about the fact that some sites may not show up in the iframe- this is intended to be for demonstrational purposes, so please don't worry about the "validity" of my idea/code.

Thanks!

Answer 1

Google选择设置一些标题，以防止它出现在iframe中检查控制台：

<iframe src='https://google.com'></iframe>

它读取

Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

How to make a HTML browser using iframe

1 个答案: