多个iframe webpackOk

2024-11-05

利用 postMessage 进行数据传递（iframe 及web worker）及问题

一 postMessage应用于主页面和iframe之间进行数据的传递 1 子iframe页面向主页面进行数据传递: // 多个子iframe需要将自己的计数统计到主页面进行数据上报 window.parent.postMessage({ count:count(), id:'1' },'*'); // 主页面进行接收 window.onmessage = (e)=>{ if(!e.data.id) return; var id = e.data.id; var count = e.data.

完美判断iframe是否加载完成

var iframe = document.createElement("iframe"); iframe.style.width = "265px"; iframe.style.height = "490px"; iframe.style.border = "none"; iframe.src = "http://cnblogs.com/walls"; if(iframe.attachEvent){ //

js学习笔记：操作iframe

iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求.制作富文本编辑器.历史记录管理.长连接.无刷新文件上传等方面,可参考一下知乎的这个回答:Iframe 有什么好处,有什么坏处?国内还有哪些知名网站仍用Iframe,为什么?有哪些原来用的现在抛弃了?又是为什么?. 今天就总结一下操作iframe的方法,以及平时的一些使用. 知识点汇总有些事情平时不

页面嵌入dom与被嵌入iframe的攻防

1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.href = url } 通过顶层框架的判断,得知自己所在的框架是否是顶层框架.来判断自己页面所在的情况. 知识点:不同域中的iframe不能相互访问. 比如我们的页面在别人的页面iframe中,我们的页面跟别人的页面就在不同的域中. 这时候我们通过window.top.location是无法访问loc

iframe用法

如何获取url中的参数并传递给iframe中的报表

在使用报表软件时,用户系统左边一般有目录树,点击报表节点就会在右侧网页的iframe中显示出报表,同时点击的时候也会传递一些参数给网页,比如时间和用户信息等.如何使网页中的报表能够获取到传递过来的参数呢?以下用报表软件FineReport简单介绍一些. 具体实现过程将报表生成页面时,给网页添加onload事件,首先获取url中的参数,然后嫁接到iframe的src上,或者通过获得的参数拼接处完整的报表url赋给iframe的src. <html> <head> <title

JavaScript权威设计--Window对象之Iframe(简要学习笔记十四)

1.Window对象属性的文档元素(id) 如果在HTML文档中用id属性来为元素命名,并且如果Window对象没有此名字的属性,Window对象会赋予一个属性,它的名字是id属性的值,而他们的值指向表示文档元素的HTMLElement对象. Window对象是以全局对象的形式存在于作用域链的最上层,这就意味着HTML文档中使用的id属性会成为可以被脚本访问的全局变量. 如: <button id="but"/> 就可以通过全局变量but来引用此元素. 2.多窗体窗口(

ASP.NET 页面禁止被 iframe 框架引用

两个站点: a.sample.com b.sample.com a.sample.com 站点中的一段示例 JS 代码: var iframe = document.createElement("iframe"); iframe.id = "frame"; iframe.src="http://b.sample.com/index.html"; iframe.onload = function() { var domdoc = iframe.co

父页面操作iframe子页面的安全漏洞及跨域限制问题

一.父子交互的跨域限制同域情况下,父页面和子页面可以通过iframe.contentDocument或者parent.document来交互(彼此做DOM操作等,如父页面往子页面注入css). 跨域情况下,就会有限制,无法相互操作. [解决办法] 1.主域不同没招 2.主域相同,子域不同以父(a.baidu.com)子(b.baidu.com)为例: 这俩页面相互操作,要是想解决跨域限制,必须设置一个共同的主域,即document.domain="baidu.com" 二.禁止父

解决iframe作为子窗口，刷新后iframe页面跳转到其它页面的问题

转载请在页首注明作者与出处 http://www.cnblogs.com/zhuxiaojie/p/5990262.html 前言: 在开发网站时,尤其是管理后台,我们经常会使用iframe作为内容窗口,而外面的是菜单部分,这样就可以借助iframe,只刷新内容部分,而不刷新其它的部分. 好处:(1)给用户的视觉效果要好,用户看到的不会是要刷新整个页面. (2)加载的资源要少,所以用时更少,而且消耗服务器的流量会少一点. (3)统一管理菜单内容,不需要每个页面都写菜单,增加,修改方便. 缺点:(

三种上传文件不刷新页面的方法讨论：iframe/FormData/FileReader

发请求有两种方式,一种是用ajax,另一种是用form提交,默认的form提交如果不做处理的话,会使页面重定向.以一个简单的demo做说明: html如下所示,请求的路径action为"upload",其它的不做任何处理: <form method="POST" action="upload" enctype="multipart/form-data"> 名字 <input type="text&q

iFrame 功能详解

目录索引: 一. 简介二. 属性三. 功能四. 应用一.简介网页“帧”的概念最早是由Netscape所提出,当时全部由“帧”构成的页面,也被称之为 “框架集”页面,在一个“框架集”页面中,“帧” 是其最小构成单位,每个帧都是一个窗口,用于实现在一个框架集页面中载入许多其它页面.而且,W3C也为其推出了三种文档类型之一的框架型: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://ww

jQuery中iframe的操作

今天遇到一个问题:怎样实现点击一个按钮,在当前的页面上新增加一个小窗口,展示一个图片信息? 如图: 点击之前: 单击之后: 分析:要使新增的小窗口不影响父页面,我们这里采用iframe的框架的技术. [<iframe>也应该是框架的一种形式,它与<frame>不同的是,iframe可以嵌在网页中的任意部分.] 实现是思路:(1)在按钮的上添加一个点击的事件,在点击后加入一个iframe窗口,并将生成图片的地址加上去即可. 具体实现的代码: (1)给按钮加上点击事件: <in

Easyui dialog中嵌入iframe

如果easyui dialog的地址属性用href超链接,easyui 不会加载整个url页面,只会截取url目标页的body体间的html, 如果想加载把其他页面加载进dialog的iframe中,属性就要改用content. 引用: <link href="../css/easyui.css" rel="stylesheet" type="text/css" /> <script src="../js/jquer

iframe高度自适应（同域）

今天解决了iframe高度自适应的问题,不过这只是同域下的页面嵌入,以下是代码: function SetCwinHeight(){ var iframeid = document.getElementById("frame"); //frame是iframe的id if (document.getElementById) { if (iframeid && !window.opera) { if (iframeid.contentDocument &&

iframe关于滚动条的去除和保留

iframe嵌入页面后,我们有时需要调整滚动条,例如,去掉全部的滚动条,去掉右边的滚动条且保留底下的滚动条,去掉底下的滚动条且保留右边的滚动条.那么我们应该怎么做呢? 一:去掉全部的滚动条第一个方法: iframe 有一个scrolling属性,它有 auto , yes , no 这三个值. scrolling : auto -----在需要的时候滚动条出现 scrolling : yes ------始终显示滚动条 scrolling : no -------始终隐藏滚动条当设置

弹出iframe内嵌页面元素到父页面并全屏化

(注册博客好久了,一直没舍得添砖加瓦,主要是每次想写点东西的时候,随便搜一搜发现都比我总结的都要好,甚感尴尬,但是总是要开始的,所以这就是我的第一篇博客,也绝不会是最后一篇,废话不多说,直接入正题) iframe和弹窗这些词对于js高手来说都是耳熟能详的东西,作为一个新人来说,还在学习阶段的我就在工作中遇到这么一个奇葩的需求,要在引入的iframe页面里做一个全屏化的功能. 粗略一看,这还不容易,模拟下F11的功能键什么的,于是网上一搜还真有一大堆关于全屏化的案例,遂借来用之. 然后高高兴兴的拿

正确制作一个iframe，认识iframe

iframe作为一个网站之间交互的桥梁,受到很多站长的喜爱,但是又有不安全的因素存在,所以正确填写属性是很重要的. <iframe name="my_iframe" height="540" width="100%" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" bor

Jquery取得iframe中元素的几种方法

[jquery]获取iframe中的body元素: $("iframe").contents().find("body").html(); [使用jquery操作iframe ]1. 内容里有两个ifame <iframe id="leftiframe"...</iframe> <iframe id="mainiframe..</iframe>leftiframe中jQuery改变mainiframe

jQuery解决iframe高度自适应代码

网上查了好多用着都不行,自己搞定了:在包含iframe的页面中加入以下脚本,基本思想是在iframe加载内容后重新设置高度,下面代码尽在IE6中用过,没在其他浏览器中测试. 代码如下: <script type="text/javascript"> <!-- $( function() { //iframe高度随内容自动调整 $('.main').load( function() { $(this).height($(this).contents().find(&qu

多个iframe webpackOk

热门专题