js iframe互相调用
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>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
