首页 > 技术文章 > js iframe互相调用

zsonce 2014-10-11 11:14 原文

getElementById 要兼容所有浏览器,用这个方法,而不要用frames属性(IE专用)。

contentWindow 和上面一样...

 

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Iframe框架DIV操作</title>

    </head>

    <body>

        <iframe id="left" name="left" width="40%" height="500px" src="left.html" ></iframe>

        <iframe id="right" name="right" width="40%" height="500px" src="right.html"></iframe>

    </body> 

</html>

 

left.html

<html>

    <head>

        <script>

            var obj;

            var x;

            var y;

            function XXXX()

            {

                alert(document.getElementById("div1").style.left);

            }

        </script>

    </head> 

    <body> 

        <div style="text-align:center">左边iframe</div>

        <div id="div1" style="position:absolute; left:200px; top:200px; width:50px; height:50px" >LEFT</div> 

    </body> 

</html>

 

right.html

<html>

    <head>

        <script>

            var intX;

            var intY;

            var intX1;

            var intY1;

            var blnDrag = false; //鼠标是否已经按下

            var v = parent.document.getElementById('left');

            //鼠标按下

            function MouseDown() {

                //鼠标按下

                blnDrag = true;

                ///alert(v.document.body.innerHTML);

                intX = event.clientX - GetDiv().style.pixelLeft;

                intY = event.clientY - GetDiv().style.pixelTop;

                intX1 = event.clientX - v.document.getElementById("div1").style.pixelLeft;

                intY1 = event.clientY - v.document.getElementById("div1").style.pixelTop;

            }

        

        //鼠标拖动

        function DragDiv() {

            //判断鼠标是否已经按下

            if (!blnDrag) {

                return false;

            }

            else {

                //获取左iframe对象

                

                /// alert(v.contentWindow.document.getElementById("div1").style.pixelLeft);

                GetDiv().style.pixelLeft = event.clientX - intX;

                GetDiv().style.pixelTop = event.clientY - intY;

 

                v.contentWindow.document.getElementById("div1").style.pixelLeft = GetDiv().style.pixelLeft;

                v.contentWindow.document.getElementById("div1").style.pixelTop = GetDiv().style.pixelTop;

            }

        }

        

        //鼠标松开时

        function MouseUp() {

            //鼠标没有按下

            blnDrag = false;

        }

        

        //得到DIV

        function GetDiv() {

            return document.getElementById("div2");

        }

        function ButtonClick()

        {

            parent.document.getElementById('left').contentWindow.XXXX();

        }

        </script>

    </head>

    <body>

        <div style="text-align:center">右边iframe</div>

        <div id="div2" style=" text-align:center;position:absolute; left:200px; top:200px; width:50px; height:50px" onmousemove="DragDiv()" onMouseDown="MouseDown()" onMouseUp="MouseUp()">RIGHT<br>可带动左边</div>

        <input type='button' value='ok' onclick='ButtonClick()'/>

    </body> 

</html>

推荐阅读