新接触了一个用iframe的项目,入门的时候子父页面的元素获取和传值搞得我头晕脑胀,浪费了很多时间。
在此,总结下iframe的一些小知识。
子页面获取父页面元素
//js
//获取父页面的window
window.parent
//获取父页面元素
window.parent.document.getElementById("objid");
//jq
//获取父页面元素
$("objname",parent.document);
父页面获取子页面元素 !记得一定要在匿名函数里写,否则就会报错,例如iframe.contentWindow == null等等。
原理,父页面获取iframe元素时,要在DOM都加载好后才能获取到,当iFrame加载它的内容时是获取不到DOM元素的
//js
//获取子页面的window
//1
document.getElementById("testiframe").contentWindow
//2
window.frames[0]
//3
$("#testiframe")[0].contentWindow
//调用子页面函数
document.getElementById(子页面id).contentWindow.子页面方法()
//---------------------------------------------------------------
//jq
var _iframe = document.getElementById('left').contentWindow;
//iframe子页面的元素
$("objid",document._iframe('iframename').document)
iframe自适应高度
$('id').load(function() { //iframe自适应
var iframeHeight=$(this).contents().height();
$(this).height(iframeHeight+'px');
if (iframeHeight != 0){
window.parent.modalhide();
}
});