zoukankan      html  css  js  c++  java
  • 在iframe父界面获取iframe里面的标签

    上一篇里边介绍了在里边利用iframe引入另一个html导航文件,有兴趣的朋友可以看一看 http://www.cnblogs.com/simba-lkj/p/6031662.html

    目前遇到一些问题们,想要在引用了iframe的文件里修改iframe里边的样式。

    解决了这个问题,整理一下,供大家参考

    demo:

    <div class="iframe">

    <iframe src="header.html" width="100%" height="442px" marginwidth="0" frameborder="no" scrolling="no"></iframe>

    </div>

    1、这是我首先考虑的一个方法

    获取iframe引入的html文件元素通过id获取

    要在网页加载完之后再进行这段代码 
    window.onload = function(){
     var test = document.getElementById('iframe的id').contentWindow.document.getElementById('iframe里要获取的元素的id');
     console.log(test);
     test.style.display = "none";
    }
     
    2、可以在iframe文件js里获取父网页的相对路径,将相对路径存储在一个数组中,通过判断相对路径 来进行操作

    实例:

     

    var URL  = window.parent.location.pathname;

    路径数组:

    var arrURL = ["/CASE/aishuoke/index.html","/CASE/aishuoke/about.html","/CASE/aishuoke/news.html","/CASE/aishuoke/download.html","/CASE/aishuoke/case.html","/CASE/aishuoke/job.html","/CASE/aishuoke/shownews.html",

    "/CASE/aishuoke/showinfo.html","/CASE/aishuoke/showimg_first.html","/CASE/aishuoke/showimg_second.html","/CASE/aishuoke/showimg_third.html","/CASE/aishuoke/showimg_forth.html"];

     

    switch (URL){

     

    case arrURL[0]:

     

    $("#shouye").addClass("show").siblings().removeClass("show");

     

    break;

    }

     

     
    总结:

    在iframe中获取父窗口的元素

    $('#父窗口中的元素ID', parent.document).click();jquery

    在父窗口中获取iframe中的元素 

    1、:var test = $("#iframe的ID").contents().find("#iframe中的控件ID");//jquery 方法1 

      var test2 =  $("#iframe中的控件ID",document.frames("frame的name").document);//jquery 方法2

      var test3 = document.getElementById('iframe的id').contentWindow.document.getElementById('iframe里要获取的元素的id');//js方法
     
     转载请注明出处,谢谢合作*-* http://www.cnblogs.com/simba-lkj/p/6032458.html
     
  • 相关阅读:
    Android笔记(adb命令--reboot loader)
    Android笔记(预安装APK)
    Linux驱动学习(编写一个最简单的模块)
    const关键字与指针
    C++函数重载遇到了函数默认参数情况
    uboot环境变量分析
    ftp服务
    Samba服务
    mariadb_2 单表的增删改查
    mariadb_1 数据库介绍及基本操作
  • 原文地址:https://www.cnblogs.com/simba-lkj/p/6032458.html
Copyright © 2011-2022 走看看