001.iframe父子兄弟之间调用传值

今天做一个后台模版的时候,弹出框关闭之后,需要刷新页面!
在主页面中包含IFrame,多的不爱说了!就先这样吧!!!
感觉没有意思!
contentWindow && parent

iframe的调用包括以下几个方面:(调用包含html dom,js全局变量,js方法)

  • 主页面调用iframe;
  • iframe页面调用主页面;
  • 主页面的包含的iframe之间相互调用;

主要知识点

  • document.getElementById("hanpang").contentWindow 得到iframe对象后,就可以通过contentWindow得到iframe包含页面的window对象,然后就可以正常访问页面元素了;
  • $("#hanpang")[0].contentWindow 如果用jquery选择器获得iframe,需要加一个【0】;
  • $("#hanpang")[0].contentWindow.$("#name").val() 可以在得到iframe的window对象后接着使用jquery选择器进行页面操作;
  • $("#hanpang")[0].contentWindow.myValue="我是胖先森"; 可以通过这种方式向iframe页面传递参数,在iframe页面window.myValue就可以获取到值,myValue是自定义的变量;
  • 在iframe页面通过parent可以获得主页面的window,接着就可以正常访问父亲页面的元素了;
  • parent.$("#hanpang")[0].contentWindow.message; 同级iframe页面之间调用,需要先得到父亲的window,然后调用同级的iframe得到window进行操作;

源码

源码包含内容,主页面(main.html)中含有两个iframe子页面(frame.html,newIframe.html)

  • 主页面如何调用子页面中的方法;
  • 子页面如何调用主页面中的方法;
  • 两个子iframe之间如何如何进行交互

main.html




    
    IFrame的数据传递


参数传递

调用子iframe方法

调用子iframe变量

调用子iframe组件

myFrame.html



    
        
        子页面
    
    
        接受参数
        调用主窗口方法
        调用主窗口变量
        调用主窗口组件
        

        
        
    

newFrame.html




    
    Title


    调用兄弟iframe
    

    
    


你可能感兴趣的:(001.iframe父子兄弟之间调用传值)