操作iframe的方法
子页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TEMPLATE</title>
<script src="https://lib.baomitu.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://lib.baomitu.com/template_js/0.7.1/template.min.js"></script>
<style>
.nav-list1 li a span{
color:#000;
}
.nav-list1 li{
list-style-type: none;
float:left;
width: 145px;
height:30px;
line-height: 30px;
color:#000;
}
.nav-list1 li.active a span{
color:#ff0000;
}
</style>
</head>
<body>
<h1>送过来科技</h1>
<div id="content"></div>
<script id="javascript_template" type="text/template">
<div class="header">
<div class="nav">
<a href="index.do" class="nav-btn"></a>
<ul class="nav-list1">
<li><a href="javascript:" onclick="goHref('1.html')"><span>服务器</span></a></li>
<li><a href="javascript:" onclick="goHref('2.html')"><span>网络设备</span></a></li>
<li><a href="javascript:" onclick="goHref('3.html')"><span>存储设备</span></a></li>
<li><a href="javascript:" onclick="goHref('4.html')"><span>虚拟机</span></a></li>
<li><a href="javascript:" onclick="goHref('5.html')"><span>软件</span></a></li>
</ul>
</div>
</div>
</script> <script>
var _html=document.getElementById('javascript_template').innerHTML; document.getElementById('content').innerHTML = _html; </script>
</body>
<script src="https://lib.baomitu.com/jquery/1.12.4/jquery.min.js"></script>
<script> function childFunction(id) {
$('.nav-list1 li').eq(id).addClass('active').siblings().removeClass('active');
} function goHref(href){
window.parent.parentChild(href);
} </script>
</html> 父页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.test{
background: #bbb;
}
</style>
</head>
<body>
<p>测试数据</p>
<p>测试数据</p>
<p>测试数据</p>
<p>测试数据</p>
<p>测试数据</p>
<div class="test">
<iframe src="template.html" width="100%" frameborder="0" scrolling="no" id="navtest" name="child"></iframe>
</div>
<input type="button" name="call child" value="call child" id="btn" onclick="callChild(3)"/>
</body>
<script src="https://lib.baomitu.com/jquery/1.12.4/jquery.min.js"></script>
<script>
function callChild(d) {
child.window.childFunction(d);
} function parentChild(a){
location.href = a;
} $(function(){ $("#navtest").load(function(){
$(this).contents().find(".nav-list1 li").eq(2).css('background','red');
}); })
</script>
</html>
操作iframe的方法的更多相关文章
- jquery操作iframe的方法：父页面和子页面相互操作的方法
今天在弄jquery操作iframe中元素:先由iframe中的子页面b.html给外面的父页面a.html页面传值,再将a.html页面计算机的值放到b.html页面上,这里就用到子页面和父页面相互 ...
- 操作iframe 的方法与兼容性
首先创建两个页面 //iframe1.html <!DOCTYPE html> <html lang="en"> <head> <meta ...
- js学习笔记：操作iframe
iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...
- jquery 操作iframe的几种方法总结
iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作 DOM方法: 父窗口操作IFRAME:window.frames["iframeSo ...
- JQuery操作iframe父页面与子页面的元素与方法
JQuery操作iframe父页面与子页面的元素与方法 JQUERY IFRAME 下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现. 第一.在iframe中查找父页面元 ...
- 笔记：javascript操作iframe内的DOM元素，及调用iframe内的方法
iframe相当于一个嵌入在网页内的浏览器,它与当前网页是隔离的. 但有时我们也需要在当前网页操作iframe内的元素或操作iframe内的javascript方法. 在网页内操作DOM元素,是使用d ...
- jQuery操作iframe中js函数的方法小结
1.jquery操作iframe中的元素(2种方式) ? 1 2 var tha = $(window.frames["core_content"].document).find( ...
- jquery方法操作iframe元素
操作iframe父元素 $("#rolesCtl",parent.document).find( 'button' ).trigger( 'click' ); 在父页面获取ifra ...
- 操作iframe的一些方法
//父页面操作iframe里的内容 oInput.onclick=function(){ var oBox = oIframe.contentWindow.document.getElementByI ...
随机推荐
- bzoj2916
容斥原理 计蒜客比赛day2t3的简化版 总数-异色三角形 对于每个点考虑,每个点红线数量为d[i],那么以这个点为顶点的异色三角形有d[i]*(n-1-d[i]),每条红线和蓝线成一个异色三角形,一 ...
- WebUploader上传大文件时,上传出错问题
上传普通文件没有问题,当文件达到一定大小的时候,上传错误,返回结果是404,我可以肯定的是路径是没有问题的.因为上传小文件等都是可以的. 然后使用webuploader的uploaderror监控错误 ...
- bzoj 1567: [JSOI2008]Blue Mary的战役地图【二分+hash】
二维哈希+二分 说是二维,其实就是先把列hash了,然后再用列的hash值hash行,这样可以O(n)的计算一个正方形的hash值,然后二分边长,枚举左上角点的坐标然后hash判断即可 只要base选 ...
- Luogu P1186 玛丽卡 【最短路】By cellur925
题目描述 麦克找了个新女朋友,玛丽卡对他非常恼火并伺机报复. 因为她和他们不住在同一个城市,因此她开始准备她的长途旅行. 在这个国家中每两个城市之间最多只有一条路相通,并且我们知道从一个城市到另一个城 ...
- python爬虫爬取汽车页面信息，并附带分析（静态爬虫）
环境: windows,python3.4 参考链接: https://blog.csdn.net/weixin_36604953/article/details/78156605 代码:(亲测可以运 ...
- 在Linux下使用linuxdeployqt发布Qt程序
一.简介 linuxdeployqt 是Linux下的qt打包工具,可以将应用程序使用的资源(如库,图形和插件)复制到二进制运行文件所在的文件夹中. 二.安装linuxdeployqt 去github ...
- Linux的proc文件系统 分类： linux 2014-06-02 10:21 623人阅读 评论(0) 收藏
proc为一个内核数据结构接口,用户空间和内核空间可以通过该接口通信, 与普通文件不同的是,这些虚拟文件的内容都是动态创建的. proc文件系统是一个伪文件系统,它只存在内存当中,而不占用外存空间. ...
- ASP.NET URLRewriter重写
URLRewriter重写是微软官方出的第三方重写插件 下载地址:http://download.csdn.net/detail/ysn1314/5421587 下载后在项目中添加引用,然后再配置文件 ...
- php安装ionCube
- 策略模式--Java篇
策略模式(Strategy):它定义了算法家族,分别封装起来,让他们之间可以互相替换,此模式让算法的变化,不会影响到使用算法的客户. 下面将以商场打折为例子,说明策略模式.商场收银如何促销,用打折还是 ...