Question

我想尝试制作这样的东西： Example

我希望能够根据下拉列表中选择的选项动态更改iframe。

到目前为止我的代码是：

    <html>
    <head>
    <script>
        function hidem() {
        document.getElementById('Select').style.display = "none";
        document.getElementById('test1').style.display = "none";
        document.getElementById('test2').style.display = "none";
        }
    function changeIt(divid) {
        hidem();
        document.getElementById(divid).style.display = "block";
    }
    </script>
    </head>

    <table border="0">
        <tr>
            <td>
                <select id="Manage" onChange="changeIt(this.value)">
                <option value="Select">Select A Management Window</option>
                <option value="test1">Google</option>
                <option value="test2">Yahoo</option>
                </select>
            </td>
            <td>
                <div id="Select">
                    <h2>Information:</h2>
                    This is a management console
                </div>
                <div id="test1" style="display:none">
                    <h2>Google:</h2>
                    <iframe src="http://www.google.com" width="100%" height="100%"></iframe>
                </div>
                <div id="test2" style="display:none">
            <h2>Yahoo:</h2>
                    <iframe src="http://www.yahoo.com" width="100%" height="100%"></iframe>
                </div>
            </td>
        </tr>
    </html>

但似乎没有按照我的意图行事。有人能帮我解决这个问题吗？

谢谢，

戴夫

Answer 1

尽管存在大量无效的HTML错误（在@BillyMoat的评论中已经突出显示），我不相信你能够做你正在计划的事情。

许多大型网站（尤其是Google）在其网页上使用X-Frame-Options: SAMEORIGIN。

这意味着不允许浏览器在父级来自不同来源（即域）的框架中显示页面......这当然取决于浏览器对此指令的理解，这是大多数当前浏览器所做的。 / p>

Details of the header from Mozilla

Here is a blog listing more details about the header，包括将阻止正在加载的网页的浏览器列表

iframe多个网站来自下拉列表

1 个答案: