欢迎使用CSDN-markdown编辑器

父页面对iframe中的子页面操控

近日在项目中需要对iframe的子页面进行操控，百度之，使用
后发现需要注意的地方有很多，并做以整理，子级获取父级简单过之，主要
说道父页面操控子页面：
**在iframe中获取父页面的元素：**

parent.document.getElementsByClassName('hth-title')[0].innerHTML = 'title'

**在父页面中获取iframe中的子页面元素：**

var Obj = $("iframe").contents().find("#title").html();  
$('header').html(Obj);
console.log( Obj)

另一种写法：

var Obj = window.frames["frame"].document.getElementById("title"); 
$('header').html($(Obj)); 
console.log($(Obj).html()) 

问题来了，在使用的时候，发现会出现返回值为null的情况
，也就是说iframe中的页面中并未找到目标元素，于是乎：

window.onload = function(){
    var Obj = window.frames["frame"].document.getElementById("title"); 
    console.log($(Obj).html())
};

那么问题又来了，在本项目中，父级的元素需要根据iframe中
的页面进行相应的变化，上面的代码并不能实时的进行改变(也
就是说在iframe中的页面进行点击跳转的时候不能触发)，于是乎又有了： 

document.getElementById('frame').onload = function(){
    var Obj = window.frames["frame"].document.getElementById("title");  
    console.log($(Obj).html())
};

解决了吗?  no no,问题又来了，如果某个页面没有
这个元素的时候，我们就会发现，父级页面动态改变的
地方变成了空的，也就是说html()传出的null把父级
动态部分替换掉了，这可不好，我们做一个简单的判断：

document.getElementById('frame').onload = function(){
    var Obj = window.frames["frame"].document.getElementById("title");  
    if($(Obj).html() != null){
        $('header').html($(Obj));
    } 
    console.log($(Obj).html())
};

革命尚未成功，还需继续完善