`

用JS或jQuery访问页面内的iframe,兼容IE/FF

IEjQueryJavaJavaScript框架 
阅读更多
js或者jQuery访问页面中的框架也就是iframe.
注意:框架内的页面是不能跨域的!
假设有两个页面,在相同域下.
index.html 文件内含有一个iframe:

XML/HTML代码 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml">   
<head>   
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />   
<title>页面首页</title>   
</head>   
   
<body>   
<iframe src="iframe.html" id="koyoz" height="0" width="0"></iframe>   
</body>   
</html>


iframe.html 内容:

XML/HTML代码 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml">   
<head>   
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />   
<title>iframe.html</title>   
</head>   
   
<body>   
<div id="test">www.koyoz.com</div>   
</body>   
</html>



1. 在index.html执行JS直接访问:

JavaScript代码 
document.getElementById('koyoz').contentWindow.document.getElementById('test').style.color='red'


通过在index.html访问ID名为'koyoz'的iframe页面,并取得此iframe页面内的ID为'test'的对象,并将其颜色设置为红色.

此代码已经测试通过,能支持IE/firefox .
2. 在index.html里面借助jQuery访问:

JavaScript代码 
$("#koyoz").contents().find("#test").css('color','red');


此代码的效果和JS直接访问是一样的,由于借助于jQuery框架,代码就更短了.

分享到：
| JavaScript执行window.onload和body onloa ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JQuery 游戏 对对碰 源代码 兼容IE/FF

    本篇文章将深入探讨一个使用jQuery实现的“对对碰”游戏，它具有良好的浏览器兼容性，包括IE和Firefox，并且能在智能手机浏览器上正常运行。下面，我们将分析这个游戏的实现原理、核心功能以及如何优化和扩展。 ...

    基于Jquery可居中显示并兼容IE6+/FF等浏览器的瀑布流程序(jquery.easing.js,jquery.vgrid.js实现)

    在本项目中，通过结合Jquery库和两个特定的插件——jquery.easing.js与jquery.vgrid.js，实现了这种布局，并且确保了在包括IE6+以及Firefox在内的多种浏览器中的兼容性。 1. Jquery：Jquery是一个广泛使用的...

    java跨全域兼容ie/ff/chrome浏览器多文件上传(原创)

    本示例通过"java跨全域兼容ie/ff/chrome浏览器多文件上传(原创)"的标题，我们可以看出这是一个解决浏览器兼容性问题并实现跨域文件上传的解决方案。下面将详细解释这个主题涉及的关键知识点。 1. **跨域资源共享 ...

    jquery.validate 兼容IE6/IE7/IE8

    jquery.validate 兼容IE6/IE7/IE8

    jquery生成二维码兼容IE

    本文将深入探讨如何使用jQuery生成二维码并确保其在Internet Explorer（IE）浏览器上兼容，这对于那些仍需支持旧版浏览器的开发者来说至关重要。 首先，我们需要一个能够生成二维码的库。在JavaScript中，有一个名...

    IE/FF兼容问题

    标题中的“IE/FF兼容问题”指的是在网页开发过程中，Internet Explorer（IE）浏览器与Firefox浏览器之间存在的兼容性挑战。由于这两个浏览器对JavaScript、CSS、DOM等Web标准的实现方式存在差异，开发者需要处理这些...

    jquery.uploadify.js 兼容IE9

    解决 jquery.uploadify.js 在ie9 下 二次打开失效问题等问题

    JQUERY实现iframe页面切换功能

    本篇文章将详细讲解如何利用jQuery实现iframe页面的切换功能，以便于创建更丰富的用户体验和更高效的页面加载策略。 首先，我们需要理解iframe的基本概念。Iframe（Inline Frame）是HTML中的一个元素，它允许我们在...

    自写jQuery插件，实现简单网页遮罩层/弹出层功能，兼容IE6、IE7

    实现弹出网页遮罩层，可兼容IE6/IE7/IE+++等； 缩放浏览器时，内容狂始终居中； 有点小bug，在IE6下，遮罩层颜色没透明，屎黑色，等我有空完善下。

    jQuery-1.8.3(&2.1.4).min.js&jquery;.fileupload&jquery;.iframe-transport

    首先，jQuery的核心库jQuery-1.8.3.min.js和jQuery-2.1.4.min.js是其发展过程中的两个稳定版本。1.8.3属于1.x系列，而2.1.4则属于2.x系列。这两个版本的主要区别在于对旧版浏览器的支持。1.x系列对IE6/7等老浏览器...

    easyui&jquery兼容版本(兼容IE8的最后版本)

    当使用高版本的jQuery时，可能会遇到与低版本EasyUI的冲突或不兼容问题，尤其是在涉及某些特定的API或者事件处理时。 "兼容IE8的easyui和jquery版本"这个压缩包文件，就是为了满足那些仍然需要支持IE8的项目而准备...

    垂直居中布局 Vertical-aligned 应用测试：兼容IE6/8/FF

    "垂直居中布局 Vertical-aligned 应用测试：兼容IE6/8/FF"这个主题涉及到如何在各种浏览器环境下，包括Firefox和较旧的Internet Explorer版本，实现元素的完美垂直居中。 在CSS中，传统的垂直居中方法可能包括使用...

    Js信息提示层(兼容ie6/ie7/ie8/FF)

    大家经常在数据输入时要做选择,有时需要辅助输入,但用select下拉框用户体验不好,所以很多时候要用到信息输入提示,点击一下显示输入信息,让用户作选择,本demo就很好做到了这一点,希望大家用得到,用的是Jquery技术.

    JQuery IFrame框架高度自适应（支持嵌套–兼容IE,ff,safafi,chrome）

    通过使用jQuery来实现iframe的高度自适应，我们可以确保内容在不同浏览器（包括IE、Firefox、Safari和Chrome）中的显示一致性，无论iframe内嵌的页面有多复杂。 首先，我们需要理解iframe的基本概念。IFrame，即...

    百度地图轨迹 jquery 兼容ie低版本

    总结来说，要在IE低版本中使用jQuery实现百度地图轨迹功能，关键在于选择合适的jQuery版本、正确引入依赖、有效处理轨迹数据以及注意兼容性问题。通过以上步骤，开发者可以为用户提供一致的用户体验，无论他们使用的...

    基于jquery带搜索功能的下拉框，兼容IE5/6/7/8/9/10

    本文将深入探讨一个基于jQuery的具有搜索功能的下拉框组件，该组件兼容广泛的Internet Explorer浏览器，包括IE5到IE10，但不支持较新的Edge浏览器。 首先，让我们了解下拉框（Dropdown）的基本概念。在网页设计中，...

    jquery图片轮播兼容IE

    **jQuery图片轮播兼容IE浏览器** 在Web开发中，图片轮播是一种常见的功能，用于展示一组图片或内容，常用于网站的首页或者产品展示区。jQuery作为一种轻量级的JavaScript库，提供了丰富的API和插件，使得实现图片...

    jquery tab 切换页面 支持iframe

    标题"jquery tab 切换页面 支持iframe"所指的就是如何在jQuery Tab组件中嵌入和切换`iframe`内容。 jQuery Tab的基本原理是通过JavaScript和CSS来创建一个可交互的导航条，每个选项对应一个内容区域。当用户点击...

    JavaScript 瀑布流 吸顶 兼容IE FF Chrome

    3. 使用jQuery或其他JavaScript库，如Masonry或Isotope，它们已经处理了大部分兼容性问题。 4. 对于吸顶效果，可以创建一个函数来检查滚动位置，并根据需要应用`position: fixed`。 在给定的文件中，`css.css`可能...

    js新闻上下滚动效果（兼容IE和ff）

    在本示例中，"js新闻上下滚动效果（兼容IE和ff）"指的是利用JavaScript实现一个新闻标题在网页上进行上下滚动的效果，这种效果常见于新闻网站，能够展示多条新闻，同时保持页面空间的有效利用。这个效果不仅在现代...

Magicbox
Global site tag (gtag.js) - Google Analytics