最近在开发一个浏览器插件,需要抓取掌中云平台的数据,由于该平台的页面结构是采用iframe嵌套的方式加载的, 所以在添加事件的时候遇到了一点小麻烦,现特此将解决方法记录如下,以供大家复制粘贴。...alert('此处应有掌声'); } } } },500); }; // user_name为触发事件元素的class
主要是通过在主页面定义一个传输数据的函数GetData(data),然后在iframe嵌入页面中通过parent.GetData(data),这样即可在GetData实现将data进行处理即可。...现在来看一下代码的实现,首先来看一个主界面的代码 javascript"> function GetData(data)...id="frameid" src="b.html"> iframe> 可以看到在主页面定义一个JavaScript函数实现,将传入的data参数.../> test 嵌入页面中主要通过一个按钮事件,将此页面中一个input文本控件中的值取出,然后通过parent.GetData...这是未点击按钮前的效果,现在点击按钮查看效果。 image.png 这样就实现了传值的效果
在上一篇文中,我们接触了JavaScript中的sandbox的概念,并且就现阶段的一些实现思路做了总结,包括YUI的闭包、iframe的sandbox以及Nodejs的VM和child_process...(),target="_blank"等; allow-scripts: 允许iframe中执行js代码; allow-same-origin: 允许iframe中的文档包括自己的源。...然而在第三方开发平台上,用户需要有更多的权限,并且涉及到一些服务器端JavaScript的开发,这将不可避免地对后台产生潜在的影响,对同时运行在一个服务器上的其他应用产生干扰。...我们可以在iframe中再套一个与Host同源的iframe作为Proxy,同样采用location hash的方法将消息传送到Proxy中。...web service,随后将返回的信息经由Host前端转发给iframe中的app。
________________________________________ 控制横向和纵向滚动条的显隐?...> ________________________________________ IE地址栏前换成自己的图标&可以在收藏夹中显示出你的图标 javascript:doZoom(14)">中 javascript:doZoom(12)">小 _________________________...a:active 表示当前活动连接的样式 a:hover 表示鼠标划过时的样式 a:visited 表示已经访问过的连接的样式 "link-visited-hover-active"...简记为 "lvha" 即 "love"+"hate" ________________________________________ 在同一页面设置不同文字链接效果的样式 <style type
7,在Flash中,如果屏蔽鼠标右键?FS命令都是什么意思?...层是可以嵌套的,我个人给大家一个技巧,在层面板中按住CTRL再拖放层到你想去成为其子层的地方就行了,我认为这是最简单直观的方法了。 11,如何改变鼠标的形状?...经常我看到很多网页中又有一个网页,还以为是用了框架,其实不然,是用了IFRAME>,它只适用于IE,NS可是不支持IFRAME>的,但围着的字句只有在浏览器不支援 iframe 标记时才会显示,如中,如果屏蔽鼠标右键?FS命令都是什么意思?...经常我看到很多网页中又有一个网页,还以为是用了框架,其实不然,是用了IFRAME>,它只适用于IE,NS可是不支持IFRAME>的,但围着的字句只有在浏览器不支援 iframe 标记时才会显示,如<
) # 切换到该iframe (二)切回主内容 完成iframe中的操作后,需要切换回主内容,才能继续操作其他不在iframe中的元素。....perform()的调用:perform()是执行动作链的关键。如果漏掉,动作链中的操作不会执行。 动作的组合:可以根据实际需要组合各种鼠标和键盘操作,实现复杂的交互。...(二)页面滚动的方法 使用 execute_script() 方法滚动页面 Selenium 提供了 execute_script() 方法,可以运行 JavaScript 代码进行页面滚动。...元素被浮动组件覆盖: 在某些页面,滚动后元素可能会被悬浮的菜单覆盖。可以使用 JavaScript 滚动调整位置。 滚动速度太快: 无限滚动页面时,滚动速度过快可能导致内容加载不及时。...无论是 iframe 内部操作,还是复杂的 鼠标和键盘交互,亦或是处理 动态加载的页面滚动,这些技能都是 Selenium 用户必须掌握的。
: · Fullpage.js—快速实现全屏滚动特性: · Highlight.js—web 语法高亮: · Waypoints.js—滚动到某个元素位置时触发一个功能: · Typed.js—打字机效果...: · Chart.js—使用 JavaScript 创建漂亮的图表 · Instantclick—能够明显加速网站加载时间,鼠标 hover 时预加载资源 · Chartist—另一个图表库 · Motio...· Vivus.js—在 SVG 上绘制动画 · Wow.js—滚动时展现动画 · Scrolline.js—页面滚动时显示滚动进度 · Velocity.js—快速流畅的 JavaScript 动画...· Animate on scroll—漂亮的页面滚动元素动画 · Handlebars.js—Javascript 模板 · jInvertScroll—视差滚动 · One page scroll...CSS3 动画 · Pagepiling.js—全屏滚动 · Multiscroll.js—两列垂直反向滚动 · Favico.js—动态 favicon · Midnight.js—固定头部切换效果
scrolling 规定是否在 iframe 中显示滚动条,值为 yes、no、auto 6、src 设置 iframe 的地址(页面/图片) 7、srcdoc 用来替换 iframe 中 html、body...iframe的话: 1、去掉滚动条 iframe src="....,target="_blank" allow-pointer-lock 在 iframe 中可以锁定鼠标,主要和鼠标锁定有关 可以通过在 sandbox 里,添加允许进行的权限....>iframe> 这样可以保证 js 脚本的执行,但是禁止 iframe 里的 javascript 执行 top.location = self.location 八、iframe 的局限 1、创建比一般的...在 Safari 和 Chrome 里,通过 JavaScript 动态设置 iframe 的 SRC 可以避免这种阻塞情况 3、唯一的连接池 浏览器只能开少量的连接到 web 服务器。
如果元素是一个iframe,则查找文档内容 contents() 获得所有节点(子元素、文本) abc xxx end() 回到最近的一个”破坏性”操作之前 end() 回到最近的一个”破坏性”...事件冒泡可能会引起预料之外的效果,上例中,本来只想触发元素 的click事件,然而 元素和元素的click事件也同时被触 发了.因此有必要对事件的作用范围进行限制.当单击元素时,只 触发元素的click...该方法的作用是获取到光标相对于页面的x坐标和y坐标.如果没有使用jquery时,那么IE浏览器中 是使用event.pageX()和event.pageY()方法.如果页面上有滚动条,则还要加上滚动条的宽度和高...); return false;//阻止链接跳转 }); (7)event.which()方法 该方法的作用是在鼠标单击事件中获取到鼠标左中右键,在键盘事件中获取键盘的按键....die(type, [fn]),从元素中删除先前用.live()绑定的所有事件 die解绑 2.4 事件切换【了解】 hover([over,]out) 当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数
平滑滚动 曾经有一段时间,我们不得不依靠JavaScript的window.scrollY来实现来执行此操作,如果想平滑滚动还要依赖定时器增加一个动画。...随着scroll-behavior属性的新增,我们可以使用一行CSS代码来处理网站上的平滑滚动!浏览器支持约为75%,兼容性还是挺不错的。...(或者jQuery) 给浏览器中的元素添加动画。...随着互动的项目越来越复杂,移动设备的大量增加,表现性能变得越来越重要。Flash 被抛弃,有天赋的动画开发者使用 HTML5 去实现过去从未实现的效果。...但是实际情况下会有意外发生,那就是在移动端iphone上面,触摸会触发CSS的hover,并且这个的触发会很高概率地先于touchstart事件,在这个事件里面会判断当前是显示还是隐藏的状态,由于css
执行链中的所有动作 13 release(on_element=None ) 在某个元素位置松开鼠标左键 14 send_ keys( *keys_to_send ) 发送某个键到当前焦点的元素 15...使用技巧 js在selenim有许多应用,最主要的有滚动条操作。...邮箱为例,用户名嵌套在iframe弹窗内。...实现功能 百度页面,打开x超链接,在新窗口下拉滚动条。...实现代码: 新建alert.html,生成弹窗效果 <!
对应一般的JavaScript动态渲染的页面信息(Ajax加载),我们可以通过分析Ajax请求来抓取信息。...Selenium可以获取浏览器当前呈现的页面源代码,做到可见既可爬,对应JavaScript动态渲染的信息爬取非常有效。...将鼠标移至当前鼠标位置的偏移量 drag_and_drop(源,目标)-- 然后移动到目标元素并释放鼠标按钮。...("https://www.zhihu.com/explore") #执行javascript程序将页面滚动移至底部 driver.execute_script('window.scrollTo(0,document.body.scrollHeight...print(input.tag_name) #节点标签名称 print(input.size) #获取节点的大小 #driver.close() ⑨ 切换Frame: 网页中有一种节点叫做iframe
Formjacking 从技术角度看,主要是将恶意 javascript 代码嵌入到合法网站中,用于获取敏感信息,而这种攻击手法本质上属于界面劫持中的 点击劫持(ClickJacking)。...由于用户需要用鼠标拖放完成的操作越来越多(如复制粘贴、小游戏等等),拖放劫持大大提高了点击劫持(ClickJacking)的攻击范围,将劫持模式从单纯的鼠标点击拓展到了鼠标拖放行为。...目前主要的网页隐藏技术有两种:CSS隐藏技术和双iframe隐藏技术。CSS 隐藏技术的原理是利用 CSS 技术控制网页内容显示的效果。...另外一种思路是使用脚本代码以及其他技术增加用户点击特定按钮的概率。主要方法如JavaScript实现鼠标跟随技术、按键劫持 (Stroke Jacking) 技术等。...所以这里用个很骚的操作:按下F12,滑动滚动条至按钮的上边框与浏览器边框大致重合,在控制台输入这个函数document.documentElement.scrollTop,这个函数的大致意思就是获取你的滚动条滚动了多长
在 WebDriver 中, 将这些关于鼠标操作的方法封装在 ActionChains 类提供。...这时就需要通过switch_to.frame()方法将当前定位的主体切换为frame/iframe表单的内嵌页面中。...方法 说明 switch_to.frame() 将当前定位的主体切换为frame/iframe表单的内嵌页面中 switch_to.default_content() 跳回最外层的页面...在这种情况下,就可以借助JavaScript来控制浏览器的滚动条。WebDriver提供了execute_script()方法来执行JavaScript代码。...用于调整浏览器滚动条位置的JavaScript代码如下: <!
;") # 使用 JavaScript 获取页面标题 title = driver.execute_script("return document.title;") # 使用 JavaScript 滚动页面到底部....drag_and_drop_by_offset(source, xoffset, yoffset) # 一个元素按像素拖动 # 滚轮滚动条,如果没效果尝试用一个新的ActionChains .scroll_by_amount...) block控制垂直滚动,inline控制水平滚动: 'start' 元素将与视口的顶部或左侧对齐。...补充:显示鼠标指针 鼠标指针是操作系统管理的,我们可以移动浏览器的指针焦点位置,但是操作系统不会让鼠标跟着动。...鼠标除了常用的按键还有一些特殊的,比如“中键”。
Javascript 库 Particles.js — 一个用来在 web 中创建炫酷的浮动粒子的库 Three.js — 一个用来在 web 中创建 3d 物体和 3d 空间的库 Fullpage.js...— 快速实现全屏滚动特性 Typed.js — 打字机效果 Waypoints.js — 滚动到某个元素位置时触发一个功能 Highlight.js — web 语法高亮 Chart.js — 使用 JavaScript...创建漂亮的图表 Instantclick — 能够明显加速网站加载时间,鼠标 hover 时预加载资源 Chartist — 另一个图表库 Motio — 一个基于动画和平移的雪碧图库 Animsition... — 滚动时展现动画 Scrolline.js — 页面滚动时显示滚动进度 Velocity.js — 快速流畅的 JavaScript 动画 Animate on scroll — 漂亮的页面滚动元素动画... — 两列垂直反向滚动 Favico.js — 动态 favicon Midnight.js — 固定头部切换效果 Anime.js — 动画库 Keycode — 获取键盘按键的 JavaScript
希望的效果是在一帧一帧地执行,然而浏览器会将多个操作合并到同一帧中,检测发现 ? 有分帧的策略,但得在回调中再次调用requestAnimationFrame才行 ?...而下拉框的样式在手机上是调用原生内核的(浏览器的或WebView的),为了保证一致的效果(在测试过程中发现华为机型经常出现不一致的问题),可以统一用ul来模拟安卓下的下拉框弹层选择,在iPhone下保持其原生即可...表格的表头、首行或首列固定等 表格数据多时,需要有个滚动时把某一信息行列固定的效果,方案有两种 ->直接设置该行列的position 这是最直接的,在一般表格中可以使用,但数据量很多的时候,或者表头复杂...iPhone或iPad的safari浏览器通过iframe>嵌入pdf来预览时,只能看到第一页,无法滚动翻页查看更多 这个问题是ios自家的bug了,所以为了解决,只能引入第三方支持(不再使用浏览器自身支持的...,页面滚动到底部(有滚动条),点击select,input, textarea等相关项时,会自动滚动到页面顶部 在chrome60中还是正常的,一升级就出现问题了 目前还不知道为何,可能是chrome61
增强复选框和单选按钮 10.4 上传组件 jQuery File Upload Plugin 百度 Web Uploader Uploadify Plupload arale-upload – 轻量级 iframe...scrolling for the web OwlCarousel – create beautiful responsive carousel slider jquery-mousewheel – jQuery鼠标滚轮滚动侦测插件...pagePiling.js – 全屏滚动效果 13.13 分屏滚动 multiscroll.js – 分屏滚动效果 13.14 转场效果 Animsition – 页面切换时的过渡效果 13.15 固定元素...Transit – CSS transitions and transformations for jQuery Move.js – 简化CSS3动画的JS库 ScrollMe – 在网页中加入各种滚动动画效果...– 一个 JavaScript 编写的 PDF 阅读器 ---- 前端参考集 frontend-guidelines – Some HTML, CSS and JS best practices.
,通过Select对象进行强转,来调用select控件中的Api来达到操作的目的。...三、交互操作弹出框的处理 1、弹出框分类: 弹出框分为两种,一种基于原生JavaScript写出来的弹窗,另一种是自定义封装好的样式的弹出框,即原生JavaScript写出来的弹窗,另一种弹窗用click...: 3、模拟滚动条操作 在写脚本时,总会遇到一种情况,就是当滚动拉倒最下面了,表单或者下拉框、按钮这些元素未在当前页面展示,而webdriver提供的方法都是操作当前页面可见的元素,这时我们使用JavaScript...操作浏览器的滚动条,滚动后使页面元素可见,就可完成后面的元素操作了。...核心思路: 就是使用js去控制浏览器滚动条的位置,在使用selenium调用JavaScript操作js完成。