子页面

<!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. Day.js 是一个仅 2kb 大小的轻量级 JavaScript 时间日期处理库，和 Moment.js 的 API 设计保持完全一样，dayjs

    https://gitee.com/mirrors/Day.js api: https://gitee.com/mirrors/Day.js/blob/master/docs/zh-cn/API-re ...

  2. yield示例分析

    yield示例分析 public class TestYield { private static final Object lock = new Object(); public static vo ...

  3. 【黑金教程笔记之003】【建模篇】akuei2的Verilog hdl心路

    Verilog hdl不是“编程”是“建模” Verilog hdl语言是一种富有“形状”的语言. 如果着手以“建模”去理解Verilog hdl语言,以“形状”去完成Verilog hdl语言的设计 ...

  4. bzoj 5281: [Usaco2018 Open]Talent Show【dp】

    注意到sum_t比较小,所以设f[i][j]为选前i头牛,当前sum_t为j的最小sum_w值,转移是f[i][j]=min(f[i-1][j],f[i-1][j-t[i]]+w[i]),然后i维用滚 ...

  5. bzoj 2016: [Usaco2010]Chocolate Eating【二分+贪心】

    二分答案,贪心判断,洛谷上要开long long #include<iostream> #include<cstdio> using namespace std; const ...

  6. solr的安装配置与helloworld

    一.安装solr 1.安装jdk环境和tomcat 2.解压solr压缩包,这里我解压到opt目录下 3.把/usr/local/solr-4.8.0/dist/solr-4.8.0.war部署到to ...

  7. java-异常简介

    1.简介 ############################################################### ############################### ...

  8. apache单ip多域名多目录配置

    自己的vps上放了别人的网站,那怎么样让自己的网站和别人的网站能同时被访问呢?需要使用apache的虚拟主机配置. 配置httpd.conf文件 比如原来是这种只是指向一个目录的配置 Document ...

  9. jQuery委托

    $('#container').on('click', '.elementClass', function() { // code }); http://stackoverflow.com/quest ...

  10. Java 线程 —— Wait （等待）和 Notify（唤醒）

    Wait (等待)和 Notify(唤醒) 这里讲了一个Wait (等待)和 Notfity(唤醒),下面这个实例(工厂,商店,消费者) 额,然后,你就知道了,需要写三个类:工厂类,Shop类,消费者 ...