Javascript 当使用嵌套的iframe和FrameSet时，Jquery颜色框弹出窗口不能与Firefox一起使用_Javascript_Jquery_Html_Asp.net_Colorbox

Javascript 当使用嵌套的iframe和FrameSet时，Jquery颜色框弹出窗口不能与Firefox一起使用

javascript jquery html asp.net

Javascript 当使用嵌套的iframe和FrameSet时，Jquery颜色框弹出窗口不能与Firefox一起使用,javascript,jquery,html,asp.net,colorbox,Javascript,Jquery,Html,Asp.net,Colorbox,我使用了jquery颜色框弹出窗口，它与Google chrome配合良好，但与Firefox不配合。我有3个页面Default.aspx、Default2.aspx和Default3.aspx <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <frameset rows="50,*" fr

我使用了jquery颜色框弹出窗口，它与Google chrome配合良好，但与Firefox不配合。

我有3个页面Default.aspx、Default2.aspx和Default3.aspx

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<frameset rows="50,*" frameborder="NO" border="0">      
    <frame src="Default2.aspx" name="frameCV" marginwidth="0" marginheight="0" 
     scrolling="AUTO" noresize="noresize">
 </frameset>
 </html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title></title></head>
<body>
    <table style="width:100%">
        <tr>
            <td>
                <iframe src="Default3.aspx" style="width:800px;height:500px; "></iframe>
            </td>
        </tr>
    </table>

</body>
</html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.colorbox.js"></script>
    <script type="text/javascript">
        function fn_openPopUp(url) {
            $.colorbox({ href: url, width: "80%", height: "80%", iframe: true });
        }
    </script>
    <link rel="stylesheet" href="colorbox.css" type="text/css" />
</head>
<body>
    <form>
        <div>
            <img usemap="#P1" style="top:0px;left:0px;position:relative;" src="Reserved.png" border="0" />
            <map name="P1">
                <area tabindex="4" href="javascript:fn_openPopUp('http://dotnetschools.com/')" style="text-decoration:none;" target="_top" shape="poly"
                      coords="237,196,237,265,400,265,400,196" />
            </map>
        </div>
    </form>
</body>
</html>

Default3.aspx嵌套在Default2.aspx中，Default2.aspx嵌套在Default.aspx中。

完整的源代码如下：

Default.aspx

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<frameset rows="50,*" frameborder="NO" border="0">      
    <frame src="Default2.aspx" name="frameCV" marginwidth="0" marginheight="0" 
     scrolling="AUTO" noresize="noresize">
 </frameset>
 </html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title></title></head>
<body>
    <table style="width:100%">
        <tr>
            <td>
                <iframe src="Default3.aspx" style="width:800px;height:500px; "></iframe>
            </td>
        </tr>
    </table>

</body>
</html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.colorbox.js"></script>
    <script type="text/javascript">
        function fn_openPopUp(url) {
            $.colorbox({ href: url, width: "80%", height: "80%", iframe: true });
        }
    </script>
    <link rel="stylesheet" href="colorbox.css" type="text/css" />
</head>
<body>
    <form>
        <div>
            <img usemap="#P1" style="top:0px;left:0px;position:relative;" src="Reserved.png" border="0" />
            <map name="P1">
                <area tabindex="4" href="javascript:fn_openPopUp('http://dotnetschools.com/')" style="text-decoration:none;" target="_top" shape="poly"
                      coords="237,196,237,265,400,265,400,196" />
            </map>
        </div>
    </form>
</body>
</html>

Default2.aspx

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<frameset rows="50,*" frameborder="NO" border="0">      
    <frame src="Default2.aspx" name="frameCV" marginwidth="0" marginheight="0" 
     scrolling="AUTO" noresize="noresize">
 </frameset>
 </html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title></title></head>
<body>
    <table style="width:100%">
        <tr>
            <td>
                <iframe src="Default3.aspx" style="width:800px;height:500px; "></iframe>
            </td>
        </tr>
    </table>

</body>
</html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.colorbox.js"></script>
    <script type="text/javascript">
        function fn_openPopUp(url) {
            $.colorbox({ href: url, width: "80%", height: "80%", iframe: true });
        }
    </script>
    <link rel="stylesheet" href="colorbox.css" type="text/css" />
</head>
<body>
    <form>
        <div>
            <img usemap="#P1" style="top:0px;left:0px;position:relative;" src="Reserved.png" border="0" />
            <map name="P1">
                <area tabindex="4" href="javascript:fn_openPopUp('http://dotnetschools.com/')" style="text-decoration:none;" target="_top" shape="poly"
                      coords="237,196,237,265,400,265,400,196" />
            </map>
        </div>
    </form>
</body>
</html>

Default3.aspx

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<frameset rows="50,*" frameborder="NO" border="0">      
    <frame src="Default2.aspx" name="frameCV" marginwidth="0" marginheight="0" 
     scrolling="AUTO" noresize="noresize">
 </frameset>
 </html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title></title></head>
<body>
    <table style="width:100%">
        <tr>
            <td>
                <iframe src="Default3.aspx" style="width:800px;height:500px; "></iframe>
            </td>
        </tr>
    </table>

</body>
</html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.colorbox.js"></script>
    <script type="text/javascript">
        function fn_openPopUp(url) {
            $.colorbox({ href: url, width: "80%", height: "80%", iframe: true });
        }
    </script>
    <link rel="stylesheet" href="colorbox.css" type="text/css" />
</head>
<body>
    <form>
        <div>
            <img usemap="#P1" style="top:0px;left:0px;position:relative;" src="Reserved.png" border="0" />
            <map name="P1">
                <area tabindex="4" href="javascript:fn_openPopUp('http://dotnetschools.com/')" style="text-decoration:none;" target="_top" shape="poly"
                      coords="237,196,237,265,400,265,400,196" />
            </map>
        </div>
    </form>
</body>
</html>


函数fn_openPopUp（url）{
$.colorbox（{href:url，宽度：“80%”，高度：“80%”，iframe:true}）；
}

现在我正在从google chrome浏览Default.aspx，它工作正常，但与Firexfox不兼容。当您从Default3.aspx页面中删除属性target=“\u top”时，将打开Colorbox弹出窗口

您可以这样做：

$('map area[target="_top"]').removeAttr('target');