iframe 挂载固定的 dom

2026-09-16

iframe的Dom操作

我最近遇到这样一个需求, 抛开业务相关不谈,但从技术上说:页面中选择公司中的页面,在iframe中展示被选的页面,并且要对页面做一些Dom相关的处理.也就是说我们需要在父级页面中操作子页面(iframe)的dom. 我查找了一些资料,简单做了一些整理. 主要分成两个方向来说明: 父级页面操作子页面和子页面操作父级页面. 一.父级页面操作子页面这里面存在一个问题:两个页面不能跨域(小域名也要相同).iframe操作是有跨域限制的,试想以下我的页面的iframe引用了竞争对手的页面,但是我用

Vuejs——（2）Vue生命周期，数据，手动挂载，指令，过滤器

(八)传入的数据绑定先创建一个对象(假如是obj),然后将他传入Vue实例中,作为data属性的值,那么 ①obj的值的变化,将影响Vue实例中的值的变化: ②相反一样: ③可以在Vue实例外面操纵obj,一样对Vue实例有影响: ④获取obj.a的值(假如他有这个属性),可以通过Vue实例(例如变量vm),vm.a这样的形式来获取(他们是等价的,也是绑定的): ⑤后续添加的数值是无效的例如: <div id=> {{a}} >+1</button> obj = {a

Vuejs——Vue生命周期，数据，手动挂载，指令，过滤器

版权声明:出处http://blog.csdn.net/qq20004604 目录(?)[+] 原教程: http://cn.vuejs.org/guide/instance.html http://cn.vuejs.org/guide/syntax.html 本博文是在原教程的基础上加上实例,并尝试说明的更详细. (十)Vue实例的生命周期如图:(我自己翻译的中文版,英文版请查看本博文顶部的,第一个链接) (八)传入的数据绑定先创建一个对象(假如是obj),然后将他传入Vue实例中

jQuery解决iframe高度自适应代码

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

使用iframe的优缺点，为什么少用iframe以及iframe和frame的区别。

注:HTML5不再支持使用frame,iframe只有src 属性一.使用iframe的优缺点优点:1.程序调入静态页面比较方便;2.页面和程序分离;缺点:1.iframe有不好之处:样式/脚本需要额外链入,会增加请求.另外用js防盗链只防得了小偷,防不了大盗.2.iframe好在能够把原先的网页全部原封不动显示下来,但是如果用在首页,是搜索引擎最讨厌的.那么你的网站即使做的在好,也排不到好的名次! 如果是动态网页,用include还好点!但是必须要去除他的<html><head>

iframe多层嵌套时获取元素总结

父页面获取子页面元素: 注意:onload事件 jQuery获取: $("iframe").contents().find("holder")......; (嵌套三层,或者更多时) $('iframe').contents().find('iframe').contents().find("iframe")...... js获取: window.frames["holder"].document 或者 window.fram

html/css基础篇——iframe和frame的区别【转】

转自共享圈的使用iframe的优缺点,为什么少用iframe以及iframe和frame的区别.其中本人不认同的地方有做小修改注:HTML5不再支持使用frame,iframe只有src 属性一.使用iframe的优缺点优点: 1.程序调入静态页面比较方便; 2.页面和程序分离;缺点: 1.iframe有不好之处:样式/脚本需要额外链入,会增加请求.另外用js防盗链只防得了小偷,防不了大盗. 2.iframe好在能够把原先的网页全部原封不动显示下来,但是如果用在首页,是搜索引擎最讨厌的.那么

2014-10-28——iframe多层嵌套时获取元素总结

同域: 父页面获取子页面元素: 注意:onload事件 jQuery获取:$("iframe").contents().find("holder")......; (嵌套三层,或者更多时)$('iframe').contents().find('iframe').contents().find("iframe")...... js获取:window.frames["holder"].contentWindow.document

Google street、Google satellite 、百度地图Iframe切换桥接JS

1.地图切换方法注意:父页面访问Iframe页面JS方法需根据Iframe的名字来调用如:named "mapIfame" 即 mapIfame.window.iframeFunction();子页面访问父页面parent.parentFunction();iframeFunction(),parentFunction()都是各自页面的方法. /* * * IFrame地图与外部操作桥接 * @author BOONYACHENGDU@GMAIL.COM */ (function()

iframe动态创建及释放内存

近期參与一个项目的开发,因为项目是基于浏览器的胖client(RIA)应用程序,页面中大量调用iframe.后期測试发现浏览器内存一直居高不下,并且打开iframe页面越多内存占用越大.在IE系列浏览器中尤其明显.全部打开的iframe页面即使关闭了.内存使用也没有明显的下降.IE浏览器在内存占用达到400M左右就变得非常卡.分析发现是iframe没有释放造成的,于是对全部已关闭的iframe所占用的内存进行释放,尽管不能全然释放.可是iframe内存占用量不会一直增长,整个应用内存使用量控制在

从Chrome源码看浏览器如何构建DOM树

.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto } p { font-size: 15px; text-indent: 2em } #colorbox.crayon-colorbox,#cboxOverlay.crayon-colorbox,.crayon-colorbox #cboxWrapper { position: absolute; top: 0; left: 0; z-

IFrame父页面和子页面的交互

现在在页面里面用到iframe的情况越来越少了,但有时还是避免不了,甚至这些页面之间还需要用js来做交互,那么这些页面如何操作彼此的dom呢?下面将会逐步介绍. 1.父页面操作子页面里面的dom 下面提供了四中方法来操作iframe里面的dom: a. contentWindow: 以window对象返回iframe中的文档,所有主流浏览器都支持. 用法: // 获取id为iframeId的子页面中的div01元素 document.getElementById('iframeId').cont

在没有DOM操作的日子里，我是怎么熬过来的（中）

前言继上篇推送之后,在掘金.segmentfault.简书.博客园等平台上迅速收到了不俗的反馈,大部分网友都留言说感同身受,还有不少网友追问中篇何时更新.于是,闰土顺应呼声,在这个凛冽的寒冬早晨,将中篇热文滚烫呈上. 搬好小板凳,接下来,正文从这开始- 在上篇的众多留言中,有位网友的评论比较具有代表性,摘出来供大家一阅: " 同感啊楼主比如做tab的时候,以前jq就是切换一下class,现在vue是切换数据,再根据数据显示class,这弯绕的啊 " 当然,有评论就有回复,请看下面这

JavaScript是如何工作的：编写自己的Web开发框架 + React及其虚拟DOM原理

这是专门探索 JavaScript 及其所构建的组件的系列文章的第 19 篇. 如果你错过了前面的章节,可以在这里找到它们: JavaScript 是如何工作的:引擎,运行时和调用堆栈的概述! JavaScript 是如何工作的:深入V8引擎&编写优化代码的5个技巧! JavaScript 是如何工作的:内存管理+如何处理4个常见的内存泄漏! JavaScript 是如何工作的:事件循环和异步编程的崛起+ 5种使用 async/await 更好地编码方式! JavaScript 是如何工作的:深

React文档（十六）refs和DOM

Refs 提供了一种方式,用于访问在 render 方法中创建的 DOM 节点或 React 元素. 在标准的React数据流中,props是使得父组件和子组件之间交互的唯一方式.你通过props重新渲染子组件.然而,有些情况需要你必须在数据流之外修改一个子组件.这个子组件可以是一个React组件的实例,或者是一个DOM元素.对于这两种情况,React提供了解决方式. 什么时候使用refs 以下有几种合适的情况使用refs: 处理焦点,文本选择或者媒体播放触发强制的动画整合第三方DOM库避

app.$mount("#app") 手动挂载

$mount()手动挂载当Vue实例没有el属性时,则该实例尚没有挂载到某个dom中: 假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载.例如: new Vue({ //el: '#app', router, render: h => h(App) // render: x => x(App) // 这里的render: x => x(App)是es6的写法 // 转换过来就是: 暂且可理解为是渲染App组件 // render:(function(x){ // r

获取iframe内的元素

$("#iframeID").contents().find("#index_p") 2获取父窗体的值 $('#father', parent.document).val() 3 调用 iframe 内的方法 content_iframe.window.test(); // content_iframe iframe的 name 4.js var a=document.getElementById('content_iframe').contentWindow.

解密虚拟 DOM——snabbdom 核心源码解读

本文源码地址:https://github.com/zhongdeming428/snabbdom 对很多人而言,虚拟 DOM 都是一个很高大上而且远不可及的专有名词,以前我也这么认为,后来在学习 Vue 源码的时候发现 Vue 的虚拟 DOM 方案衍生于本文要讲的 snabbdom 工具,经过阅读源码之后才发现,虚拟 DOM 原来就是这么回事,并没有想象中那么难以理解嘛- 这篇文章呢,就单独从 snabbdom 这个库讲起,不涉及其他任何框架,单独从这个库的源码来聊一聊虚拟 DOM. 在讲 s

iframe多层嵌套时获取元素

一.同域:1.父页面获取子页面元素:注意:onload事件jQuery获取:$("iframe").contents().find("holder")......; (嵌套三层,或者更多时)$('iframe').contents().find('iframe').contents().find("iframe")...... js获取:window.frames["holder"].contentWindow.documen

Extjs Ext.ux.IFrame的用法以及父子窗口间函数相互调用

Extjs Ext.ux.IFrame的用法以及父子窗口间函数相互调用 Ext.ux.IFrame Extjs官方提供的一个组件,可以很方便的使用. 这样就完成了一个简单的IFrame的使用,通过Extjs的扩展它变成了一个组件可以放在任何容器内并且支持父容器的布局很灵活 var iframe = Ext.create("Ext.ux.IFrame", { frameName: 'hello', src: "MyJsp.jsp" }); Ext.creat

iframe的应用量还是这么大

以前查阅资料说iframe已经过时,不建议使用,可是在先进的2018年,你去随便打开一个网站,扔都可以见到iframe的身影,这不禁要发问:iframe的应用量为什么还是这么大? HTML5不再支持使用frame,iframe只有src 属性一.使用iframe的优缺点优点:1.程序调入静态页面比较方便;2.页面和程序分离;缺点:1.iframe有不好之处:样式/脚本需要额外链入,会增加请求.另外用js防盗链只防得了小偷,防不了大盗.2.iframe好在能够把原先的网页全部原封不动显示下来,但是

iframe 挂载固定的 dom

热门专题