子页面

<!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-高级教程-实例-字符串：09. Java 实例 - 字符串小写转大写

    ylbtech-Java-Runoob-高级教程-实例-字符串:09. Java 实例 - 字符串小写转大写 1.返回顶部 1. Java 实例 - 字符串小写转大写  Java 实例 以下实例使用了 ...

  2. vs 中switch语句快捷键列出枚举

    先switch然后两下tab会补完到default,光标显示在switch后的变量这时输入枚举,输完后回车,自动补完所有枚举的case

  3. SpringBoot项目以服务器方式启动

    SpringBoot项目,如果未引入Web相关依赖,不会以服务器方式进行启动,会以应用的方式启动并结束 <dependency> <groupId>org.springfram ...

  4. vue中的列表项删除操作

    <script> Vue({ data: { orders: [] }, created() { $.get( { url: 'orders', dataType: 'json' }) . ...

  5. qr.update导致的java.lang.NullPointerException空指针异常

    debug以后代码走到了qr.update这一步,再向下走一步就会报错了,内容是java.lang.NullPointerException 最后再三检查发现是SQL语句写错了!,我写的是插入语句是I ...

  6. Luogu P1004/P1006 方格取数/传纸条 【棋盘Dp】 By cellur925

    我明明记得写过这篇啊qwq为什么会搞丢 两题几乎一样. 如果再拓展到k条路,就要用网络流跑了,本蒟现在还不会. 我们容易想到四维dp,但是有一种更好的方法. 首先,先从左上到右下.再从右下到左上可以近 ...

  7. mybatis-plus 获取新增id

    <insert id="insert" parameterType="com.xxx.xxxx.pojo.User"> insert into t_ ...

  8. 【OCR技术系列一】光学字符识别技术介绍

    注:此篇内容主要是综合整理了光学字符识别 和OCR技术系列之一]字符识别技术总览,详情见文末参考文献 什么是 OCR? OCR(Optical Character Recognition,光学字符识别 ...

  9. LightOj 1220 Mysterious Bacteria

    题目大意: 给出一个x,求满足x = b^p,p最大是多少? 解题思路: x可以表示为:x = p1^e1 * p2^e2 * p3^e3 ....... * pn^en. p = gcd (e1,e ...

  10. poj 2632 Crashing Robots 模拟

    题目链接: http://poj.org/problem?id=2632 题目描述: 有一个B*A的厂库,分布了n个机器人,机器人编号1~n.我们知道刚开始时全部机器人的位置和朝向,我们可以按顺序操控 ...