子页面

<!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. 【转】解决从jenkins打开robot framework报告会提示‘Opening Robot Framework log failed ’的问题

    最新的jenkins打开jenkins robot framework报告会提示如下 Verify that you have JavaScript enabled in your browser.  ...

  2. Image2Caption

    定义 图像标注或语言生成图像问题把计算机视觉与自然语言处理联系在了一起,是广义的人工智能领域的一大难题.通常涉及到特征提取(用cnn提取出图像内部不为人类感知的向量特征)和语言模型建立.为图像提取文字 ...

  3. 07_传智播客iOS视频教程_#import指令

    mac切换中英文输入法默认是Ctrl+空格键. 预处理指令的执行时机是在编译之前.在编译之前执行预处理指令. #import指令是包含文件,将指定的文件的内容在预编译的时候拷贝到写指令的地方. #im ...

  4. E20180219-hm-xa

    comparison n. 比较,对照; [语] 比喻; 比较级; conjunction  n. 连接; 连词; 联合,结合物; (恒星.行星等的) 合; [例句] assignment  n. 分 ...

  5. Marching squares 算法 获取轮廓(contour tracing)

    https://en.wikipedia.org/wiki/Marching_squares  http://blog.csdn.net/coolingcoding/article/details/1 ...

  6. bzoj 1179: [Apio2009]Atm【tarjan+spfa】

    明明优化了spfa还是好慢-- 因为只能取一次值,所以先tarjan缩点,把一个scc的点权和加起来作为新点的点权,然后建立新图.在新图上跑spfa最长路,最后把酒吧点的dis取个max就是答案. # ...

  7. codevs 4228 小猫爬山 【搜索】By cellur925

    题目描述 Description Freda和rainbow饲养了N只小猫,这天,小猫们要去爬山.经历了千辛万苦,小猫们终于爬上了山顶,但是疲倦的它们再也不想徒步走下山了(呜咕>_<). ...

  8. match email address

    [A-Za-z0-9\._+]+@[A-Za-z]+\.(com|org|edu|net)

  9. ElasticSearch | centos7 上安装ES

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

  10. [转]广义正交匹配追踪(gOMP)

    广义正交匹配追踪(Generalized OMP, gOMP)算法可以看作为OMP算法的一种推广,由文献[1]提出,第1作者本硕为哈工大毕业,发表此论文时在Korea University攻读博士学位 ...