zoukankan      html  css  js  c++  java
  • iframe操作 调整大小

    在我们做网页的时候,经常会用到iframe,它很向asp.net中的母板,但是比母板更加的灵活好用。在配合jquery后,会实现很强大的效果,像Tab控件的效果啊等等。第一篇开发经验笔记,还是不说那么多了。进入主题。

    我们根据不同的单击焦点在同一个iframe中打开不同的网页时,往往都需要去动态的改变iframe的大小。我们都知道去改变它的height,但是往往得不到想要的效果。先说说几种实现的方法:

    首先,触发转到子页面的函数,这个我们需要改变iframesrc的值,可以写在click事件或者mouseover事件或者mousedown事件等等中。

    var iframe1 = window.parent.document.getElementById("iframeID");
    iframe1.src="要转到的子页面";

    接下在就是在改变子页面的大小。这里分为两种(我知道的):在触发转到子页面的页面写,还有一种是直接在子页面写。

    一、在触发转到子页面的页面写,据我所知,这种方法可以实现,但是没有第二种好,使用条件有限

    在用jquery时,我们知道它是在页面加载时先加载jquery,然后加载其它内容,我们在触发一个事件时,只是改变了缓存中的值,要在触发第二个事件时,第一次触发的值才会真正的显示出来。那么只用一个click去触发,只能转到子页面,但是不能改变iframe的大小,这里,我用两个函数去触发,mousedownmouseup

    例:$("#buttonID").mousedown(function(){
    //转到子页面的函数
    resizeFrame();//改变大小的
    })
    .mouseup(function(){
    resizeFrame();//将缓存中修改的值显示到页面,即实现iframe大小改变的效果
    })
    但是,这种方法有一定的缺陷,因为响应函数是需要一定的时间的,不同的浏览器相应的时间不同,这样会照成鼠标单击过快而使mouseup()函数来不及相应。

    二、直接在子页面写改变iframe大小的函数,这种方法可以避免第一种响应时间的问题
    在子页面中的javascript中加入

    function resizeFrame(){
    //改变iframe大小的代码
    }

    然后在页面加载时触发<body onload="return resizeFrame()">
    接下来说改变iframe大小的函数

    1、我的方法是:
    function resizeFrame(){
    var content_iframe = window.parent.document.getElementById("iframeID");//获取iframeID
    var div_height = parseInt($(content_iframe).contents().find("子网页ID").css("height"));//使iframe高度等于子网页高度
    content_iframe.height = div_height + 100;
    }

    在网上有人说可以不用获取iframeID,也不用获取子网页的ID,但是这种方法我用了一下,没有打到预期的效果

    function resizeFrame(){
    frameElement.width = document.documentElement.clientWidth;
    frameElement.height= document.documentElement.clientHeight;
    }

    有什么错误的地方,欢迎指出。

     

  • 相关阅读:
    替换configparser 中指定的值
    configparser 读取与赋值
    接口测试第五步 --》 拼接url
    接口测试第四步 --》 封装excel
    接口测试第三步 --》 封装请求方法
    接口测试第二步 --》 推荐定义一个log 文件
    超级直观理解tcp握手
    crash 潜水
    提高MySQL查询速度
    JSON文件存入MySQL数据库
  • 原文地址:https://www.cnblogs.com/flybeijing/p/2542892.html
Copyright © 2011-2022 走看看