iframe遇到的坑,如子父页面元素获取报错,iframe自适应高度

新接触了一个用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();
    }
});  

你可能感兴趣的:(iframe遇到的坑,如子父页面元素获取报错,iframe自适应高度)