javascript - 如何使用 iframe 制作 HTML 浏览器

Question

关闭。此题需要 details or clarity 。目前不接受答案。

---

想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题.

已关闭 7 年前。

Improve this question

我想制作一个小型浏览器类型的 HTML 页面。基本上，我想制作一个纯粹由 HTML 组成的浏览器。

在我看来，这是可以做到的。我所需要的只是一个简单的浏览器地址栏，也许还有选项卡。

第一部分可以轻松完成 - 使用 iframe 和输入字段。我这里已经有了代码:

    <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>

编辑:关于谷歌的问题只是出于好奇。下面是我想回答的问题!

我可以轻松地将输入字段附加到页面顶部，使其看起来像地址栏，只留下选项卡问题。我知道可以使用 jQuery 来创建选项卡(这不是我的强项)——但是，我如何打开和关闭选项卡？ (就像在实际的网络浏览器中一样)

此外，我并不担心某些网站可能不会显示在 iframe 中 - 这只是为了演示目的，所以请不要担心“有效性” “我的想法/代码。

谢谢!

Answer 1

Google 选择设置一些 header 以防止其出现在 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'.