iframe子页面与父页面间元素及js变量的访问

1、子页面访问父页面元素 

window.parent.document.getElementById("openId").value; 

jQuery方法为： 

$(window.parent.document).contents().find("#openId").val();
与document相关的方法都可以这样用 

2、父页面访问子页面元素 

document.getElementById("iframeId").contentDocument.getElementsByTagName("table");
 contentDocument后可以使用document相关方法 

jQuery方法为： 

$("#iframeId").contents().find("#openId").val(); 

   $(window).load(function (){
        alert($("#iframepage").contents().find("#openId").val());
        $("#iframepage").contents().find("#openId").val(1111);
        $("#modifybtn").click(function(){
            alert($("#iframepage").contents().find("#openId").val());
        });
    });
    $(document).ready(function(){
        $("#modifybtn").click(function(){
            alert($("#iframepage").contents().find("#openId").val());
        });
    });

  window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 
 $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 
在ready下直接改子页面中元素无效，或是alert元素的值显示undefined，原因应该是子页面还没加载完毕，父页面就去访问子页面元素造成的，这时用window.onload可避免

3、子页面访问父页面js变量（注：父页面的js变量需为全局变量） 

父页面：

var variableParent=......;

子页面：

var variable = parent.variableParent;
  (variableParent为父页面定义的变量) 

4、父页面访问子页面js变量 

两种方法：

第一种：用定时器去尝试获取子页面中的变量

var dIframe = document.getElementById('iframepage'),
 oWin = dIframe.contentWindow;
 var i = 0,
 _timer = setInterval(function() {   //用定时器去尝试获取子页面中的变量
 if (i >= 100 && _timer) {
 clearInterval(_timer);
 }
 if (oWin && typeof(oWin.deviceID) != 'undefined') {
 alert('来自子页面sun.html的变量a：' + oWin.deviceID);
 if (_timer) {
 clearInterval(_timer);
 }
 }
 i ++;
 }, 30);

第二种：通过在父页面编写回调函数，再在子页面调用，达到传值的目的

父页面：

function deviceIdCallback(deviceId) {
    alert(deviceId);
}

子页面：

deviceID=data.deviceId;
$(window.parent.deviceIdCallback(deviceID));


(参考：http://abc08010051.iteye.com/blog/1843120)