上一篇里边介绍了在里边利用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. Linq创建带命名空间、前缀、Soap格式的XML

    关于XML,我也是刚接触,关于一般常见的XML,博客园.CSDN上的资料很多,对于不常见的带命名空间.前缀.Soap格式的XML的描述相对来说寥寥无几,上一篇我写到了对相对复杂的XML的读操作,下面说 ...

  2. python 编辑文件时路径问题解决方法:文件或者目录不存在、文件编辑后无法保存等(以编辑xml文件为例)

    1.获取工程所在根路径:根路径=os.path.dirname(os.path.abspath('__file__')) 2.将获取的根路径和相对路径组合:组合路径=os.path.join(根路径, ...

  3. markdown-js 添加表格,代码块 parse

    简介 markdown-js 是将 markdown转换成 HTML 的 JavaScript 库,我再网站中使用它来预览 markdown ,但是发现它对 代码块 和 表格 是不转换的.这么鸡肋的地 ...

  4. 编译驱动模块时,出现“stack protector enabled but no compiler support”[解决办法]【转】

    转自:http://blog.chinaunix.net/uid-26847859-id-3297170.html 原文地址:编译驱动模块时,出现“stack protector enabled bu ...

  5. NodeJS 调试工具(node-inspector)

    node-inspector是基于Chrome的调试工具. 安装: npm install -g node-inspector 1.启动node-inspector来监听node.js的debug调试 ...

  6. 【iPhone手机老提示升级怎么办】

    首先复制链接 https://oldcat.me/web/NOOTA9.mobileconfig  然后到自带浏览器(Safari)打开,点击GO,后会弹出安装,安装即可,如果出现密码的,这个密码是你 ...

  7. javascript之聊天室(单机)来自于冷的锋刃

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

  8. js如何判断获取到的值是否在数组中

    很简单,定义一个数组,判断下就得了. var arrayList = [1,2,3,4]; arrayList .indexOf(2); 返回0 arrayList .indexOf(6); 返回1 ...

  9. Eclipse 代码格式:“{ }”的格式设置

    Eclipse设置代码大括号的格式 编写代码有很多中风格,常见的三种风格: 1.K & R风格:这种风格的代码比较紧凑,优点是在教科书或者打印成纸张的时候比较省地方:缺点是大括号匹配问题,代码 ...

  10. javascript各种宽高

    参考: http://www.w3cschool.cc/jsref/dom-obj-all.html http://www.cnblogs.com/wen12128/archive/2012/05/2 ...