function showIframe(url,w,h){
//添加iframe
var if_w = w;
var if_h = h;
$("<iframe width='" + if_w + "' height='" + if_h + "' id=‘iFrame' name='iFrame' style='position:absolute;z-index:4;' frameborder='no' marginheight='0' marginwidth='0' allowTransparency='true'></iframe>").prependTo('body');
//iframe屏幕适应宽高设置
var st=document.documentElement.scrollTop|| document.body.scrollTop;//滚动条距顶部的距离
var sl=document.documentElement.scrollLeft|| document.body.scrollLeft;//滚动条距左边的距离
var ch=document.documentElement.clientHeight;//屏幕的高度
var cw=document.documentElement.clientWidth;//屏幕的宽度
var objH=$("#iFrame").height();//浮动对象的高度
var objW=$("#iFrame").width();//浮动对象的宽度
var objT=Number(st)+(Number(ch)-Number(objH))/2;
var objL=Number(sl)+(Number(cw)-Number(objW))/2;
$("#iFramee").css('left',objL);
$("#iFrame").css('top',objT);
$("#iFrame").attr("src", url)
}

showIframe('https://www.baidu.com/?tn=78040160_26_pg&ch=6','100%','100%');

js动态添加iframe,自适应页面宽高的更多相关文章

  1. Js动态获取iframe子页面的高度////////////////////////zzzz

    Js动态获取iframe子页面的高度   Js动态获取iframe子页面的高度总结 问题的缘由 产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度 ...

  2. Js动态获取iframe子页面的高度总结

    问题的缘由 产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度 给元素设置高度 这方法是用在父级页面里的,通过获取子级页面的高度给iframe设置 ...

  3. js动态获取浏览器或页面等容器的宽高

    首先说一下js动态获取浏览器或页面等容器的宽高的方法大体有哪些: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHei ...

  4. 使用js动态添加组件

    在文章开始之前,我想说两点 1 自己初学js,文章的内容在大神看来可能就是不值一提,但是谁都是从hello world来的,望高   手不吝指教# 2 我知道这个标题起的比较蛋疼,大家看图就能说明问题 ...

  5. 【原生js】js动态添加dom,如何绑定事件

    首先要明白浏览器在加载页面的时候是按顺序来加载的,这样以来就很清楚了,js动态添加dom以后,这些dom并没有绑定事件,这个时候最简单的一个办法就是:将绑定事件的方法封装到一个函数A中,在动态添加完d ...

  6. MUI 里js动态添加数字输入框后,增加、减少按钮无效

    numbox 的自动初化是在 mui.ready 时完成的mui 页面默认会自动初始化页面中的所有数字输入框,动态构造的 DOM 需要进行手动初始化.比如:您动态创建了一个 ID 为 abc 的数字输 ...

  7. js动态添加onload、onresize、onscroll事件(另类方法)

    js动态添加onload.onresize.onscroll事件(另类方法)   window 的 onload.onresize.onscroll 事件,跟其他的事件不一样,它不能用 attachE ...

  8. form表单 无法提交js动态添加的表单元素问题。。

    第一种情况, 这种情况js动态添加的表单元素是不能提交到服务器端的 <table> <form method="post" action=" url   ...

  9. 原生JS动态添加和删除类

    原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...

随机推荐

  1. RxJava--Buffer,GroupBy 对比

    Buffer 设定收集n个元素为一组,以下方代码为例,三个为一组,则当组满三个元素时,返回一次List数据 没组满三个元素时,如果调用onComplete,直接发送剩余元素,没调用onComplete ...

  2. CodeForces - 140A New Year Table (几何题)当时没想出来-----补题

    A. New Year Table time limit per test2 seconds memory limit per test256 megabytes inputstandard inpu ...

  3. python(面向对象-类封装调用)

    一.面对对象思想 (1)大家肯定听过 Python 中”一切皆对象“的说法,但可能并不了解它的具体含义,只是在学习的时候听说 Python 是面向对象的编程语言,本节将向大家详细介绍 Python 面 ...

  4. Python2 与 Python3 的区别

    python解释器默认编码(python2与python3的区别一) python2 解释器默认编码:ascii python3 解释器默认编码:utf-8 输入(python2与python3的区别 ...

  5. commons-logging slf4j log4j 区别

    日志门面 1.Apache通用日志接口(commons-logging.jar) Apache Commons包中的一个,包含了日志功能,必须使用的jar包.这个包本身包含了一个Simple Logg ...

  6. 使用Python+TensorFlow2构建基于卷积神经网络(CNN)的ECG心电信号识别分类(二)

    心律失常数据库 目前,国际上公认的标准数据库包含四个,分别为美国麻省理工学院提供的MIT-BIH(Massachusetts Institute of Technology-Beth Israel H ...

  7. jacoco 生成单测覆盖率报告

    一.jacoco 简介 jacoco 是一个开源的覆盖率工具,它针对的开发语言是 java.其使用方法很灵活,可以嵌入到 ant.maven 中:可以作为 Eclipse 插件:可以作为 javaAg ...

  8. POI问题总结,关于数字级联及多级级联(三级以上)

    目录 最近公司业务需要用到excel,并且要导出模板,今天为止所有的功能都已经实现了,在这里对出现的一些问题做一个总结. 效果图: 这是一个五级联动的数据,其中第一列是数字开头,实现了五级联动 问题1 ...

  9. 流媒体与实时计算,Netflix公司Druid应用实践

    Netflix(Nasdaq NFLX),也就是网飞公司,成立于1997年,是一家在线影片[租赁]提供商,主要提供Netflix超大数量的[DVD]并免费递送,总部位于美国加利福尼亚州洛斯盖图.199 ...

  10. Windows命令行:xcopy、move、rename

    Windows命令行,xcopy复制粘贴,move剪切粘贴,rename/ren重命名.当简单事情重复做时,Windows命令行有用武之地了.批命令中,暂时用不到的行,用两个冒号注释掉. 不同路径下, ...