子页面

<!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的方法的更多相关文章

  1. jquery操作iframe的方法：父页面和子页面相互操作的方法

    今天在弄jquery操作iframe中元素:先由iframe中的子页面b.html给外面的父页面a.html页面传值,再将a.html页面计算机的值放到b.html页面上,这里就用到子页面和父页面相互 ...

  2. 操作iframe 的方法与兼容性

    首先创建两个页面 //iframe1.html <!DOCTYPE html> <html lang="en"> <head> <meta ...

  3. js学习笔记：操作iframe

    iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...

  4. jquery 操作iframe的几种方法总结

    iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作 DOM方法: 父窗口操作IFRAME:window.frames["iframeSo ...

  5. JQuery操作iframe父页面与子页面的元素与方法

    JQuery操作iframe父页面与子页面的元素与方法 JQUERY IFRAME 下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现. 第一.在iframe中查找父页面元 ...

  6. 笔记：javascript操作iframe内的DOM元素，及调用iframe内的方法

    iframe相当于一个嵌入在网页内的浏览器,它与当前网页是隔离的. 但有时我们也需要在当前网页操作iframe内的元素或操作iframe内的javascript方法. 在网页内操作DOM元素,是使用d ...

  7. jQuery操作iframe中js函数的方法小结

    1.jquery操作iframe中的元素(2种方式) ? 1 2 var tha = $(window.frames["core_content"].document).find( ...

  8. jquery方法操作iframe元素

    操作iframe父元素 $("#rolesCtl",parent.document).find( 'button' ).trigger( 'click' ); 在父页面获取ifra ...

  9. 操作iframe的一些方法

    //父页面操作iframe里的内容 oInput.onclick=function(){ var oBox = oIframe.contentWindow.document.getElementByI ...

随机推荐

  1. Java-Runoob-高级教程-实例-数组：02. Java 实例 – 数组添加元素

    ylbtech-Java-Runoob-高级教程-实例-数组:02. Java 实例 – 数组添加元素 1.返回顶部 1. Java 实例 - 数组添加元素  Java 实例 以下实例演示了如何使用s ...

  2. Tensorflow卷积接口总结

    tf.nn.conv2d(input, filter, strides, padding, use_cudnn_on_gpu=None, name=None) 这个接口用了这么久,每次都有点迷惑,这里 ...

  3. Spark 大数据文本统计

    此程序功能: 1．完成对10.4G.csv文件各个元素频率的统计 2．获得最大的统计个数 3．对获取到的统计个数进行降序排列 4．对各个元素出现次数频率的统计 import org.apache.sp ...

  4. [软件安装]MYSQL

    https://dev.mysql.com/downloads/repo/yum/ wget https://repo.mysql.com//mysql57-community-release-el7 ...

  5. bzoj 4071: [Apio2015]巴邻旁之桥【splay】

    用权值线段树会容易一些并快一些,但是想复健一下splay所以打了splay 然后果然不会打了. 解题思路: 首先把家和办公室在同一侧的提出来直接加进答案里: 对于k=1,直接选所有办公室和家的中位数即 ...

  6. [POI2008]BLO-Blockade 【无向图tarjan/鸽点】By cellur925

    题目传送门 lyd无向图tarjan的例题. 一句话题意(不得不佩服lyd老师的高度概括能力):在一张无向连通图上,求出每个点被破坏(去掉与这个点相关的所有边,不去掉这个点)后,无向图中使i,j不连通 ...

  7. bzoj1572 [Usaco2009 Open]工作安排Job【贪心 堆】

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1572 尽管这一题没有看题解,但是耗时还是比本应耗费的时间要长,所以还是写一下,以提升经验 这 ...

  8. 排序sort与qsort

    首先看sort函数见下表: 函数名 功能描述 sort 对给定区间所有元素进行排序 stable_sort 对给定区间所有元素进行稳定排序 partial_sort 对给定区间所有元素部分排序 par ...

  9. spoj DYNALCA - Dynamic LCA

    http://www.spoj.com/problems/DYNALCA/ 此题link.cut要求不能换根,当然也保证link时其中一个点必定已经是根. 方法: void link(Node *x, ...

  10. codevs 3044 矩形面积求并 || hdu 1542

    这个线段树的作用其实是维护一组(1维 平面(?) 上的)线段覆盖的区域的总长度,支持加入/删除一条线段. 线段树只能维护整数下标,因此要离散化. 也可以理解为将每一条处理的线段分解为一些小线段,要求每 ...