上一篇里边介绍了在里边利用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. 笔记--mysql rpm 安装

    1.rpm包下载 http://taokey.blog.51cto.com/4633273/1630561

  2. mysql数据库服务日志

    mysql数据库服务日志 ①. 错误日志:error_log ②. 普通日志:general_log ③. 慢查询日志:log-slow-query #有3个参数 分割:.mv .编写定时任务并执行: ...

  3. Spring源代码解析

    Spring源代码解析(一):IOC容器:http://www.iteye.com/topic/86339 Spring源代码解析(二):IoC容器在Web容器中的启动:http://www.itey ...

  4. Centos7搭建需要mysql的网站

    1.在centos7上安装好http.php.php-mysql服务 php-mysql是用来链接的工具 2.在centos5上yum安装mysql 注意在搭建本地yum源时把校验关闭,不然安装不上 ...

  5. js中文乱码怎么解决【转】

    ①.js 文件中文显示乱码Javascript文件XX.js编辑保存时有一种编码方案(如GBK),当打开文件的时候所用的编码(如UTF-8)和保存时的编码方案不一致时,则会出现中文显示乱码.解决方案: ...

  6. Mac > 编写跨平台桌面应用开发工具,基于 Web 技术

    Electron: The Electron framework lets you write cross-platform desktop applications using JavaScript ...

  7. mysql 批量导出建表语句 (视图,函数同理)

    import java.io.File; import java.io.FileNotFoundException; import java.io.FileOutputStream;import ja ...

  8. div+css 设计下拉

    css样式 <style type="text/css"> <!-- /* www.divcss5.com CSS下拉菜单实例 */ * { margin:; p ...

  9. TomTom (16Q3)数据协议基础

    title: TomTom数据协议介绍 title: TomTom数据协议介绍TomTom公司介绍主要经营的业务TomTom数据特点数据内容概述数据表命名特点数据关联特点数据的基本信息 TomTom公 ...

  10. ionic imgBase64

    navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: , destinationType: destinationTyp ...