jquery操作iframe（齐全版，经IE6&IE6+、firefox、chrome测试通过）

来源：互联网发布：ug软件是什么软件编辑：程序博客网时间：2024/05/16 03:40

父窗口获取子窗口元素
[javascript] view plaincopyprint?
1. $('@selector', window.frames['@iframeID'].document)
子窗口获取父窗口元素
[javascript] view plaincopyprint?
1. $('@selector', parent.document)
子窗口获取子窗口元素
[javascript] view plaincopyprint?
1. $('@selector', parent.window.frames['@iframeID'].document)
附注：出于安全考虑，浏览器不允许脚本跨域访问iframe，谷歌浏览器离线状态下认为脚本访问iframe为跨域访问（跟cookie类似，离线状态下不允许使用cookie）

例子如下：

主窗口：(index.html)

[html] view plaincopyprint?
<html>  
    <head>  
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>  
        <script type="text/javascript">  
            $(function(){  
                $('#test-button').click(function(){  
                    //获取左边iframe的元素（父窗口获取子窗口元素 ）  
                    alert($('#test-button', window.frames['left'].document).text());  
                    //获取右边iframe的元素（父窗口获取子窗口元素 ）  
                    alert($('#test-button', window.frames['right'].document).text());  
                })        
            })  
        </script>  
    </head>  
    <body>  
        <iframe id="left"  width="30%" height="50%" src="left.html"></iframe>  
        <iframe id="right" width="30%" height="50%" src="right.html"></iframe>  
        <button id="test-button">test-button-in-index</button>  
    </body>  
</html>  

左边iframe：(left.html)

[html] view plaincopyprint?
<html>  
    <head>  
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>  
    <script type="text/javascript">  
        $(function(){  
            $('#test-button').click(function(){  
                //获取主窗口iframe的元素（子窗口获取父窗口元素）  
                alert($('#test-button', parent.document).text());  
                //获取主窗口右边iframe的元素（子窗口获取子窗口元素）  
                alert($('#test-button', parent.window.frames['right'].document).text());  
            })        
        })  
    </script>  
    </head>  
    <body>  
        <button id="test-button">test-button-in-left</button>  
    </body>  
</html>  

右边iframe：(right.html)

[html] view plaincopyprint?
<html>  
    <head></head>  
    <body>  
        <button id="test-button">test-button-in-right</button>  
    </body>  
</html>  

0 0