iframe中加载html页面,jQuery - 动态创建iframe并加载页面

使用jQuery可以方便的创建html对象。下面例子是通过传入的url和宽度高度，动态的在页面中央创建一个iframe并加载内容。同时在iframe后面还会添加一个灰色的遮罩，点击遮罩便可以移除iframe和遮罩。

代码如下：

/**

弹出iframe页面(iframe后面会添加灰色蒙版)

**/

function showIframe(url,w,h){

//添加iframe

var if_w = w;

var if_h = h;

//allowTransparency='true' 设置背景透明

$("").prependTo('body');

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=$("#YuFrame1").height();//浮动对象的高度

var objW=$("#YuFrame1").width();//浮动对象的宽度

var objT=Number(st)+(Number(ch)-Number(objH))/2;

var objL=Number(sl)+(Number(cw)-Number(objW))/2;

$("#YuFrame1").css('left',objL);

$("#YuFrame1").css('top',objT);

$("#YuFrame1").attr("src", url)

//添加背景遮罩

$("

var bgWidth = Math.max($("body").width(),cw);

var bgHeight = Math.max($("body").height(),ch);

$("#YuFrame1Bg").css({width:bgWidth,height:bgHeight});

//点击背景遮罩移除iframe和背景

$("#YuFrame1Bg").click(function() {

$("#YuFrame1").remove();

$("#YuFrame1Bg").remove();

});

}

效果图：

iframe中加载html页面,jQuery - 动态创建iframe并加载页面相关推荐

jquery 动态加载html,jQuery – 动态创建iframe并加载页面
[html] /** 弹出iframe页面(iframe后面会添加灰色蒙版) **/ function showIframe(url,w,h){ //添加iframe var if_w = w; va ...
js如何判断是否在iframe中及防止网页被别站用 iframe嵌套 (Load denied by X-Frame-Options)...
1. js如何判断是否在iframe中 //方式一 if (self.frameElement && self.frameElement.tagName == "IFRAME ...
JS或JQuery动态创建Html元素的一些方法
JS动态创建元素: 一.document.createElement 说明:在选定元素(父元素)内部的最后末尾追加创建新元素,DOM结构存在新元素节点,可正常渲染显示,但网页源码中无新元素代码:删除时 ...
jQuery动态创建的元素无法删除？—— 事件委派找其静态父级
项目场景: 通过一个小案例学习事件委派时jQuery动态创建的元素无法移除. 问题描述案例需要动态添加表格行,点击GET可以移除此课程.但是后来动态创建的tr无法移除. var newtr = $( ...
JQuery动态创建Form
前言 JQuery 3.5.1 JQuery动态创建Form var form = $("<form></form>"); form.append($(&q ...
IE7下动态创建Iframe时，去除边框
IE7下动态创建Iframe时,去除边框 2008-09-24 12:04 大家都知道,只要设置Iframe的属性:frameborder="0",Iframe就不显示边框,但是当 ...
ligertoolbar 动态加载按钮_Axure利用动态面板实现环形加载进度条
先来看下效果. 基本原理上面是组合效果,主要包含三个部分,左半圆.右半圆和中间的百分加载部分.左.右半圆的实现原理很简单,就是利用动态面板的遮挡功能,将一个完整的圆遮挡一半,然后在显示的那一半上面添 ...
Java程序员从笨鸟到菜鸟之（八十七）跟我学jquery（三）jquery动态创建元素和常用函数示例
在上面两篇博客中列举了太多的API相信大家看着眼晕. 不过这些基础还必须要讲, 基础要扎实.其实对于这些列表大家可以跳过, 等以后用到时再回头看或者查询官方的API说明.在本博客中就给大家讲解一下这些 ...
JQuery 动态创建表单，并自动提交
前言:写这个是为了实现使用cookie进行自动登录的功能, 下面的代码是一个元素一个元素进行创建和赋值的, (可以尝试下将所有的html代码(form.input)全部拼好以后放到${ } 中,再进行 ...
html 动态创建表格,jquery动态创建表格
html代码 js代码 var myObj = [{ "testname": "张三1111", "sex": "男", ...

iframe中加载html页面,jQuery - 动态创建iframe并加载页面

iframe中加载html页面,jQuery - 动态创建iframe并加载页面相关推荐

最新文章

热门文章