zoukankan      html  css  js  c++  java
  • iframe通信相关:父操作子,子操作父,兄弟通信

    这里写window和document是认为代表了BOM和DOM(个人理解不一定对)

    拿到了window就能操作全局变量和函数

    拿到了document就能获取dom,操作节点

    父操作子

    window:选择器.contentWindow

    document:选择器.contentWindow.document

    1  // 父页面里面写选择器获取到iframe元素,通过contentWindow获取到子页面的window,然后操作变量或函数
    2  document.getElementById().contentWindow.childrenFunction()
    3 
    4 // 父页面选择器                                    通过子页面选择器操作dom
    5  document.getElementById().contentWindow.document.getElementById().innerText = xxx

    子操作父

    window:parent.window

    document:parent.document

    1   // 拿到父页面的window,调用父页面的函数
    2   parent.window.parentFunction()
    3 
    4   // 拿到父页面的document,操作父页面的dom
    5   parent.document.getElementById().innerText = xxx

    兄弟通信(通过父级间接操作)

    window:parent.选择器(目标iframe).contentWindow
    document:parent.选择器(目标iframe).contentWindow.document
     
     
    基于子父级通信
    兄弟通信就是先向上找到父级,父级再选择目标iframe,然后再进行操作
     
  • 相关阅读:
    判断某个元素是否显示/隐藏
    文件file
    文件上传原理--FileReader
    angular搭建
    判断滚动条滚到底部
    bugDone
    webstorm界面主题
    自定义滚动条
    用电脑免费给手机发短信(转)
    c++ 面试常见问题
  • 原文地址:https://www.cnblogs.com/web-xu/p/11814304.html
Copyright © 2011-2022 走看看