js iframe互相调用

最新推荐文章于 2019-01-02 10:37:56 发布

转载最新推荐文章于 2019-01-02 10:37:56 发布 · 83 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zsonce/p/4018600.html

文章标签：

#xhtml

本文介绍如何在HTML中使用iframe创建嵌套页面，并通过JavaScript实现两个iframe间的元素操作与位置联动，包括获取元素样式、响应鼠标事件进行元素移动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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">

<head>

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

</head>

<body>

</body>

</html>

left.html

<html>

<head>

var obj;

var x;

var y;

function XXXX()

{

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

}

</script>

</head>

<body>

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

</body>

</html>

right.html

<html>

<head>

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>

</body>

</html>

posted on 2014-10-11 11:14 zorru 阅读( ...) 评论( ...) 编辑收藏

转载于:https://www.cnblogs.com/zsonce/p/4018600.html