A,B,C3个页面:
A中利用iframe分别嵌入B,C页面:
A.html:
<html>
<head>
<title></title>
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script type="text/javascript">
var getIframeDocument = function (element) {
return element.contentDocument || element.contentWindow.document;
};
window.onload = function () {
var f11 = getIframeDocument(document.getElementById("f1"))
var f22 = getIframeDocument(document.getElementById("f2"));
$(f11).children().find(":checkbox").click(function () {
var i = $(this).prevAll(":checkbox").length;
if ($(this).attr("checked") == "checked") {
$(f22).children().find(":checkbox").eq(i).attr("checked", "checked");
}
else {
$(f22).children().find(":checkbox").eq(i).removeAttr("checked");
}
});
$(f22).children().find(":checkbox").click(function () {
var i = $(this).prevAll(":checkbox").length;
if ($(this).attr("checked") == "checked") {
$(f11).children().find(":checkbox").eq(i).attr("checked", "checked");
}
else {
$(f11).children().find(":checkbox").eq(i).removeAttr("checked");
}
});
}
</script>
</head>
<body>
<div>
<iframe src='B.html' width="100" height="100" id="f1" name="f1" ></iframe>
<iframe src='C.html' width="100" height="100" id="f2" name="f2" ></iframe>
</div>
</body>
</html>
B,C页面:
<html> <head> <title></title> </head> <body> <div> <input type="checkbox" style="display:block" id="c1" name="c1" /><label for="c1">checkbox1</label> <input type="checkbox" style="display:block" id="c2" name="c2" /><label for="c2">checkbox2</label> <input type="checkbox" style="display:block" id="c3" name="c3" /><label for="c3">checkbox3</label> </div> </body> </html>
<html> <head> <title></title> </head> <body> <div> <input type="checkbox" style="display:block" id="c4" name="c4" /><label for="c4">checkbox4</label> <input type="checkbox" style="display:block" id="c5" name="c5" /><label for="c5">checkbox5</label> <input type="checkbox" style="display:block" id="c6" name="c6" /><label for="c6">checkbox6</label> </div> </body> </html>
c1-c4,c2-c5,c3-c6联动,主要是想记录一下jquery 操作iframe