上一篇里边介绍了在里边利用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
 

在iframe父界面获取iframe里面的标签的更多相关文章

  1. iframe父页面获取iframe子页面的元素 与 iframe子页面获取父页面元素

    一.在iframe子页面获取父页面元素代码如下:$('#objld', parent.document); 二.在父页面获取iframe子页面的元素代码如下:$("#objid", ...

  2. js 在iframe子页面获取父页面元素,或在父页面 获取iframe子页面的元素的几种方式

    用JS或jquery访问页面内的iframe,兼容IE/FF 注意:框架内的页面是不能跨域的! 假设有两个页面,在相同域下. index.html 文件内含有一个iframe: XML/HTML代码 ...

  3. iframe父页面获取子页面的高度

    最近做项目中用到了iframe,子页面更改父页面的高度,经过九九八十一难,找到了解决的办法. $(window).load(function() {  var h=$(document).height ...

  4. iframe父页面获取子页面的参数

    1.父页面中的iframe <iframe name="parentPage"></iframe> 2.子页面中元素的属性 <input type=& ...

  5. iframe父页面获取子页面元素方法

    1.window.frames["iframe的id"].contentDocument.getElementsByClassName("mycontainer" ...

  6. javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,

    javascript获取iframe框架中,加载的页面document对象 因为浏览器安全限制,对跨域访问的页面,其document对象无法读取.设置属性 function getDocument(i ...

  7. iframe父页面和子页面获取元素和js变量

    父页面获取iframe页面元素和变量 获取方法:$("#id")[0].contentWindow.showInfo(): 获取元素:  $("#id").co ...

  8. js获取iframe和父级之间元素,方法、属,获取iframe的高度自适应iframe高度

    摘自:http://blog.csdn.net/kongjiea/article/details/38870399 1.在父页面 获取iframe子页面的元素 (在同域的情况下 且在http://下测 ...

  9. iframe子页面获取父页面元素的方法

    在iframe子页面获取父页面元素 代码如下: $.('#objld', parent.document); 在父页面获取iframe子页面的元素 代码如下: $("#objid" ...

随机推荐

  1. Makefile编译库

    funs.h: #ifndef __FUNS_H__ #define __FUNS_H__ void fun1(); #endif funs.c #include "funs.h" ...

  2. C 一些基础

    C语言的几个输入输出函数 #include <stdio.h> getchar(),putchar() scanf(),printf() 1->getchar()与scanf()唯一 ...

  3. Arnold AtArray API Test

    #include <ai.h> #include <iostream> #include <stdio.h> #include <vector> #in ...

  4. js使用模板快速填充数据

    1.html <!DOCTYPE html> <html> <head> <title>模板标签</title> </head> ...

  5. 通过Ajax异步提交的方法实现从数据库获取省份和城市信息实现二级联动(xml方法)

    之前有写过是从JavaScript数组里获取省市信息来实现二级联动,但是似乎有很多需求是要从数据库里获取信息,所以就需要根据异步提交,局部刷新的思想来实现来提高用户交互问题 第一种方法是xml方法 1 ...

  6. webapi mvc session一直获取不到问题

    前一段时间在给移动端写接口时遇到一个调用接口发送邮箱 session 一直获取不到的问题.我来给遇到问题的同志们说一说 自个在网上查了好多资料,问了一些朋友后.终于找到解决方案了. 大家都知道weba ...

  7. 关于工程结合git的配置

    我们通常把代码放到git sever中,(scm manager)中,上传,下载代码, 可是通常工程的代码改动会有图标提示,改动过的,或者新增的,那么需要在eclipse的工程中做一下简单配置 1,工 ...

  8. linux内核追踪——find_next_bit函数详详详解

    写在前面 宗旨:把话说清楚,把道理讲透彻. 约定:所有代码均来自Linux内核2.6.24版. 建议:本文介绍得十分详细,但也略显繁琐,读者可以先看“Ⅴ.总结”部分带注释的源码,如果哪里不清楚,再回头 ...

  9. iOS常见面试题

    一.为什么要在主线程中更新UI,这样做有什么好处? UIKit中的大部分类都不是“线程安全”的,为了解决这个线程不安全的问题,苹果推荐所有应用程序的UI操作都在主线程中执行,这样就不会出现多个线程同时 ...

  10. jq菜单折叠效果

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...