子页面

<!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. silverlight 子UserControl获取父UserControl

    文章转载自: [Silverlight] Silverlight中访问父对象 http://bbs.blueidea.com/thread-2964806-1-1.html 当前一个需求是一个User ...

  2. win8 使用notepad++写C代码

    1. 安装mingw,这里有个不错的教程 http://www.metsky.com/archives/588.html 2. 在notepad++里做设置, 安装nppexec: nppexec-& ...

  3. linux下系统调用劫持ioctl

    实验环境:linux 2.6.32   64位系统 采用lkm(动态加载内核模块)方式劫持ioctl系统调用,系统调用过程如图所示(以open为例子) 实验代码:(头文件有不需要的,但是懒得改了,在系 ...

  4. bzoj 4819: [Sdoi2017]新生舞会【二分+最小费用最大流】

    如果\( b[i]==0 \)那么就是裸的费用流/KM,当然KM快一些但是为什么不写KM呢因为我不会打板子了 考虑二分答案,那么问题变成了判定问题. \[ ans=\frac {a_1+a_2+... ...

  5. ElasticSearch | centos7 上安装ES

    0 参考博客文章(感谢!!!) [1]  https://www.jianshu.com/p/10949f44ce9c 在linux服务器上安装jdk [2]  https://www.elastic ...

  6. ROS学习笔记十：URDF详解

    Unified Robot Description Format,简称为URDF(标准化机器人描述格式),是一种用于描述机器人及其部分结构.关节.自由度等的XML格式文件. 一.URDF语法规范 参见 ...

  7. [Usaco2006 Jan] Dollar Dayz 奶牛商店

    Description 约翰到奶牛商场里买工具．商场里有K(1≤K≤100).种工具,价格分别为1,2,-,K美元．约翰手里有N(1≤N≤1000)美元,必须花完．那他有多少种购买的组合呢? Inpu ...

  8. UML 用例图（转载）

    UML是系统架构设计师考试的一个重要考点,需要考生掌握.但是有些考生,在学习的过程中会有这样的疑问,在敏捷开发时代,UML还有没有必要去学习? UML还是有用的,主要用在设计和分析阶段,但是UML不适 ...

  9. Hackonacci Matrix Rotations 观察题 ，更新了我的模板

    https://www.hackerrank.com/contests/w27/challenges/hackonacci-matrix-rotations 一开始是没想到观察题的.只想到直接矩阵快速 ...

  10. ambari-server启动报错500 status code received on GET method for API：/api/v1/stacks/HDP/versions/2.4/recommendations Error message : Server Error解决办法（图文详解）

    问题详情 来源是,我在Ambari集群里,安装Hue. 给Ambari集群里安装可视化分析利器工具Hue步骤(图文详解 所遇到的这个问题. 然后,去ambari-server的log日志,查看,如下 ...