父页面上的EventListener -通过iFrame滚动块 - 腾讯云开发者社区

文章/答案/技术大牛

发布

手摸手打造类码上掘金在线IDE（四）——双向通信

前言写字楼里写字间，写字间里程序员；程序人员写程序，挣点小钱过大年一首定场诗送给大家上回书说道，一个在线IDE所必备的条件之一——沙箱环境，我们讲了现在市面上主流的沙箱环境的原理讲了现在主流...和沙箱环境，只能通过window.postMessage 来传递。...我们知道 src 引入方式他首先有个跨域限制，于是，跨域限制就会导致我们只能通过postMessage 来通信我们上回书说道，如果通过 postMessage来通信！...// 向父组件发送消息，并且根据tpye来区分不同的消息 this....，其实在真正的通信中，还有很多类型，比如完成之后的通信，重新渲染的通信，等等在这里我们暂且按下不表，因为后面还有个重头戏，编译，这一块是整个内容中最重要的部分，因为涉及babel，vuesfc解析等内容

1.1K3 0

JQuery iframe宽高度自适应浏览器窗口大小的解决方法

iframe滚动条，其所在父页面不出现滚动条。...说明：这里设置style="overflow: hidden;" 作用在于隐藏父页面的滚动条; 添加通过js获取 tab对应的页面内容--> iframe name...> JS代码片段1(批量更改所有tab页的iframe高度) /** * 设置tab标签对应的iframe页面高度 */ function changeFrameHeight(){ var...('changeFrameHeight()', 500); // //延迟500毫秒执行 changeFrameHeight方法 }); js片段代码2(只更新当前tab页的iframe高度）

8K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

前端之HTML和CSS

a> 　块元素标签(行元素)和内联元素标签(行内元素) 　　标签在页面上会显示成一个方块。... 4、id选择器　　通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。...，常用的属性有： 1、none 元素隐藏且不占位置 2、block 元素以块元素显示 css元素溢出当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow...3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。...页面 iframe src="001.html" frameborder="0" name="mainframe">iframe> 上面的iframe窗口，缺省显示001.html页面，

5.4K3 0

【JS应用】Iframe 解决跨域

，网上相关内容一抓一大把，但是突然学习到一个关于前端解决跨域的方式就是利用 iframe 不管你有没有了解过，反正我没有我觉得很有用并且容易忘，所以我记录下来哈哈哈下面会分三块内容进行描述...来解决这个问题基本原理 1、需要三个页面两个同域（a.com）的页面，一个和接口同域的页面（b.com）其中一个页面是父页面，也就是真正的内容页，展示数据的另外两个作为子页面，是辅助父页面请求跨域数据用的...5、给父页面传递数据上面那个 a.com 页面是辅助页，拿到数据之后，需要传递给真正需要数据的父页面（同样是 a.com 下）大概了解之后，我们来说一下简单流程现在有 a.com 下的内容页 A，...window.name 3、隐藏 iframe 由页面B 跳转到 a.com 下另一个辅助页（页面C） 4、页面C 读取到 B存放的 window.name，然后传递给父页面A 5、父页面A 拿到...数据，用于展示在页面上简单模拟现在我启动了两个服务 1、localhost:3001 下有 a.html 和 c.html a.html 是内容页，需要使用数据的终端页（以下简称A） c.html

19.6K1 1

学员投稿 | iframe 解决跨域

，网上相关内容一抓一大把，但是突然学习到一个关于前端解决跨域的方式就是利用 iframe 不管你有没有了解过，反正我没有我觉得很有用并且容易忘，所以我记录下来哈哈哈下面会分三块内容进行描述... 来解决这个问题基本原理 1、需要三个页面两个同域（a.com）的页面，一个和接口同域的页面（b.com）其中一个页面是父页面，也就是真正的内容页，展示数据的另外两个作为子页面，是辅助父页面请求跨域数据用的... 中 4、页面跳转上一步保存完数据之后，由 b.com 页面跳到 a.com 页面此时 a.com 页面就能通过 window.name 拿到 b.com 保存过的数据啦 5、给父页面传递数据上面那个... a.com 页面是辅助页，拿到数据之后，需要传递给真正需要数据的父页面（同样是 a.com 下）大概了解之后，我们来说一下简单流程现在有 a.com 下的内容页 A，需要请求接口 b.com/xxxx...隐藏 iframe 由页面B跳转到 a.com 下另一个辅助页（页面C） 4、页面C读取到B存放的 window.name，然后传递给父页面A 5、父页面A 拿到数据，用于展示在页面上简单模拟现在我启动了两个服务

2.9K3 0

记录工作中遇到的各种问题（Bug，总结，记录）

父页面中有iframe，iframe里面有分页按钮，在父页面对iframe做加载之后监听iframe中点击事件的操作，初始第一页正常，但点击第二页之后事件就失效了原代码： ?...第一次成功打印出来，即触发了load事件，但点击下一页后，iframe实际上已经刷新了，但并不会再触发这个load事件后来的解决办法是换了种监听方法，区别主要是获取iframe对象的方式变了，还不知为啥会这样...有个编辑器叫做 wangEditor，也有一些坑 wangEditor默认的吸顶滚动会影响页面上position: fixed的元素可依据文档中配置为false ?...，所以解决办法是通过iframe>嵌入pdf文件的地址，不过还有问题，见下一个 59. ...iPhone或iPad的safari浏览器通过iframe>嵌入pdf来预览时，只能看到第一页，无法滚动翻页查看更多这个问题是ios自家的bug了，所以为了解决，只能引入第三方支持（不再使用浏览器自身支持的

19.9K1 2

vivo 商品中台的可视化微前端实践

看到这，小伙伴可能会有以下疑问： iframe 和父窗口的数据通信是通过 postMessage 完成的，这里为什么不使用 postMessage 呢？...通过上述 6 个步骤，就可以让用 iframe 做展示容器的商品预览页和商品管理页共享 store 啦。这里，小伙伴可能会有疑问，为什么要使用沙箱 vue 呢？...而我们通过 uni-render ，让父窗口和 iframe 子窗口的数据通信不再需要 postMessage ，同时只使用 vue 生态中的 vuex 做数据通信。...3.2 可视化总结综上，商品中台的可视化介绍完了，我们通过 uni-render 技术方案让商品预览页（ iframe ）和商品管理页的数据通信只通过 vuex 即可完成。...六、总结综上，我们对商品中台的可视化和微前端做了整体的阐述，包含以下内容：通过 uni-render 技术方案解决了可视化页面 iframe 和父页面的数据通信问题。

1.5K5 0

Scroll，你玩明白了嘛？

而且相较于其他的方法，一般不会出什么幺蛾子（后文会讲到）。 3.2 应用自己以往需要用到滚动的场景有：组件初始化，定位到目标位置点击当前页靠底部的某个元素，触发滚动翻页 .........1、页面有 iframe 的情况下，比如说这个例子。表现是当 iframe 内的内容发生滚动时，主页面也发生了滚动。...这显然和 MDN 上的描述不一致： Element 接口的 scrollIntoView () 方法会滚动元素的父容器，使被调用 scrollIntoView () 的元素对用户可见。...但从现象上看，影响的不只是 “所在滚动区” 或者 “父容器”，祖先 DOM 元素也被影响了。由于寻觅不到 scrollIntoView 的源码，暂时只能定位到是 start 这个默认值在做妖。...所以在不那么严格的场景下，上述的代码其实可以抛弃 eventListener 的部分，只保留兜底的逻辑，进一步简化： /** 列表滚动封装 */ export const listScroll = (

3.9K2 2

见识了电信流氓插iframe+分析解决方案

首先毫无疑问wp后台是使用的iframe的结构，我们来把滚动条拉到末端，发现页面底部无故多出大片空白。最里边的滚动条拉到底部是正常的wp的最底部，另外两个滚动条到底部之后呈现的空白块又是什么呢？...通过chrome右键的审查元素我们发现，我们的页面被嵌入了一个iframe之中，而正因为文章编辑这个页面本身有一层iframe(src:post-new.php)，这里被挂了一次iframe，加上wp后台边栏这一层又被加了一次...iframe，所以出现了3个滚动条。...，而第二个iframe的src是空白页，而重点就在于后面的js。...通过我水水的前端水平，起码我可以看出：第一，这个js请求了某“logo.jpg”（不要被这寻常的名字和后缀名骗到了，后面给他传参数呢）,并放在了第二个iframe中（也就是src是空白页的那个）。

1.9K2 0

2021前端面试高频 HTML + CSS

常见的行内元素有： a b span img button input label select textarea 「块级元素：」块级元素占据父容器的整个宽度。...的区别是不会随之浏览器关闭消失，除非主动删除，最大存储 5M ❞ 15. iframe 有哪些缺点 ❝ iframe 会阻塞页面的 onload 事件，它会等待 iframe 加载执行完后，再执行...使用图片 base64 优点缺点 ❝base64编码是一种图片处理格式，通过特定的算法将图片编码成一长串字符串，在页面上显示的时候，可以用该字符串来代替图片的 url 属性。优点 : 「1....元素的包含块为 viewport 视口。该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素。元素的位置在屏幕滚动时不会改变。...❞ sticky 粘性定位 ❝元素根据正常文档流进行定位，然后相对它的最近滚动祖先和最近块级祖先。

1.4K4 0

RenderingNG中关键数据结构及其角色

： ❝绘画块的有序列表，即显示项目组和属性树状态，作为「渲染管道」图层化Layerize步骤的输入数据 ❞ 整个「绘制块列表」可以合并成一个合成层并一起栅格化，但这需要在用户每次滚动时进行昂贵的栅格化操作...一个好的方法是「默认合并图块」，也就是「不对具有属性树状态的绘制块进行合并处理」，这些属性树状态可能会在「合成器线程」上发生变化，比如合成器线程的滚动或合成器线程的变换动画。...例如，当滚动一个网站时，现有瓦片的位置会向上移动，只是需要为更远的页面内容栅格化一个新瓦片。上面的图片有四张「瓦片」。当滚动发生时，「第五块」瓦片开始出现。...另一个例子是存在「站点隔离」的多个iframe之间。这种嵌入是表面Surface通过完成的。当一个合成器提交一个合成器帧时，它伴随着一个用于区分合成帧的标识符，即「表面ID」。...这也是一个优化不必要的中间纹理或屏幕外内容的机会。例如，在很多情况下，一个独立网站的iframe的合成器帧不需要它自己的中间纹理，可以通过绘制quad直接绘制到框架缓冲区。

2.9K1 0

layer弹出层详解

出现滚动条，你还可以content: ['http://sentsin.com', 'no'] }); /!...如： View Code success – 层弹出后的成功回调方法类型：Function，默认：null 当你需要在层创建完毕时即执行一些语句，可以通过该回调。...(index); //再执行关闭 layer.getChildFrame(selector, index) – 获取iframe页的DOM 当你试图在当前页获取iframe页的DOM元素时，你可以用此方法...')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method(); 7 console.log(body.html())...(windowName) – 获取特定iframe层的索引此方法一般用于在iframe页关闭自身时用到。

6.9K2 0

网页内容加速黑科技趣谈

通过新 tab 打开的页面，其加载速度竟然比直接点击链接打开的页面要快。不信请看视频（译者注：可能需要访问外国网站）：GitHub link click vs new tab。...点击链接的同时复制链接并在新的 tab 页中打开。可以看到，尽管先点击的是链接，但渲染更快的却是新 tab 中打开的页面。...是写到 iframe 中的，但它却出现在了父级的 document 中！这是因为解析器维护了一个敞开元素栈（stack of open elements），新创建的元素会被压入栈中。...与常规 JSON 相比，ND-JSON 提前 1.5s 将内容渲染到页面上，尽管速度不如 iframe 方法那么快。在创建元素之前，必须等待完整的 JSON 对象出现。...如果你的 JSON 文件体量巨大，可能会陷入对流的企盼之中。单页应用？别着急如前所述，Github 使用了大量的代码，然而却带来这样的性能问题。

3.9K1 0

利用 Python 爬取 QQ 空间说说和相册

，显示一页的说说是滚动加载的，必须要多次下拉滚动条后才能获取到该页所有的说说，然后用 BeautifulSoup 模块构建对象解析页面，下图是放说说的 iframe ?...def get_shuoshuo(driver): page = 1 while True: # 下拉滚动条 for j in range(1,...对象 bs = BeautifulSoup(driver.page_source.encode('GBK', 'ignore').decode('gbk')) # 找到页面上的所有说说...driver.find_elements_by_class_name('item-cover')[0] p.click() time.sleep(3) # 相册大图在父frame...，切换到父frame driver.switch_to.parent_frame() # 循环相册中的照片 while True:

3.6K1 0

用 Python 爬取 QQ 空间说说和相册

，显示一页的说说是滚动加载的，必须要多次下拉滚动条后才能获取到该页所有的说说，然后用 BeautifulSoup 模块构建对象解析页面，下图是放说说的 iframe def get_shuoshuo(...driver): page = 1 while True: # 下拉滚动条 for j in range(1, 5):...对象 bs = BeautifulSoup(driver.page_source.encode('GBK', 'ignore').decode('gbk')) # 找到页面上的所有说说...driver.find_elements_by_class_name('item-cover')[0] p.click() time.sleep(3) # 相册大图在父frame...，切换到父frame driver.switch_to.parent_frame() # 循环相册中的照片 while True:

4K3 0

25个经典Selenium自动化面试题，赶紧收藏

（4）如何去定位页面上动态加载的元素？...另外xpath定位有通过绝对路径定位的，有时会不准确；而用css选择器定位比较简洁，运行速度更快，通常用于性能要求严格的场景。（15）如何判断一个页面上元素是否存在？...飘忽不定，定位方法也是一样，根据元素属性定位(元素的tag name属性是不会变的，动的只是class属性和style属性) （17）如何通过子元素定位父元素？...通过父元素定位子元素，可以通过二次定位来找到。...第一种：通过子元素定位父元素，selenium提供了parent方法，但是只能定位到父元素，却不能获取元素属性，也不能操作。第二种：通过xpath的语法直接定位。如.

3.7K3 0

油猴脚本从编写到检测

油猴脚本记（含检测）写脚本模拟爬取市面上网站（淘宝、京东、美团等）的页面内容油猴脚本是通过JS来编写，我也才接触只是对dom进行操作来完成首先是@match需要设置，就是用来说明脚本在哪个页面执行...那么脚本就设置在列表页进行为了直观显示，将在列表页创建一个iframe用来显示爬取的详情页模拟用户去点击每一个商品操作，这样子做轮询实现列表页：获取当前的页面，获取商品数，获取每个商品的链接...= 0)now_car_info_i[0].parentNode.removeChild(now_car_info_i[0]); //调用父删除iframe var iframe =...所以如果要对脚本进行检测，没有像上面代码这样子向页面中植入iframe的话，通过去检测dom和window是无法检测出使用油猴脚本的。...同时也可以通过用户的行为等方式来辅助的进行判断，因为人工去点击和脚本去执行操作还是有很大的不同。 Q.E.D.

6.1K1 0

前端常见问题和技术解决方案

-- 父窗口：http://www.domain.com/a.html -->iframe id="iframe" src="http://child.domain.com/b.html">iframe...a 欲与 b 跨域相互通信，通过中间页 c 来实现。...通过 iframe 的 src 属性由外域转向本地域，跨域数据即由 iframe 的 window.name 从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制，但同时它又是安全操作。...window.innerHeight：浏览器窗口的视口（viewport）高度（以像素为单位）；如果有水平滚动条，也包括滚动条高度。...同域名下的单点登录cookie 的 domain 属性设置为当前域的父域，并且父域的 cookie 会被子域所共享。

2.4K1 1

php layer弹出层更改背景,详解Layer弹出层样式

* 如果是iframe层 */ layer.open({ type: 2, content: ‘http://sentsin.com’ //这里content是一个URL，如果你不想让iframe出现滚动条...} }); success – 层弹出后的成功回调方法类型：Function，默认：null 当你需要在层创建完毕时即执行一些语句，可以通过该回调。...(index); //再执行关闭 layer.getChildFrame(selector, index) – 获取iframe页的DOM 当你试图在当前页获取iframe页的DOM元素时，你可以用此方法...name’]]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method(); console.log(body.html()) //得到iframe页的body内容...iframe页关闭自身时用到。

5.4K2 0

一、HTML

-- 这是一段注释 --> html标签特点： html的标签大部分是成对出现的,少量是单个出现的，特定标签之间可以相互嵌套，嵌套就是指一个标签里面可以包含一个或多个其他的标签，包含的标签和父标签可以是同类型的...页可以从一个网页链接跳转到另外一个网页。...标签块元素，表示一块内容，没有具体的语义。...2 定义页面内滚动跳转页面内定义了“id”或者“name”的元素，可以通过a标签链接到它的页面滚动位置，前提是页面要足够高，有滚动条，且元素不能在页面顶部，否则页面不会滚动。...>标签会创建包含另外一个html文件的内联框架（即行内框架），src属性来定义另一个html文件的引用地址，frameborder属性定义边框，scrolling属性定义是否有滚动条，代码如下： iframe

5.1K4 0

点击加载更多

手摸手打造类码上掘金在线IDE（四）——双向通信

JQuery iframe宽高度自适应浏览器窗口大小的解决方法

前端之HTML和CSS

【JS应用】Iframe 解决跨域

学员投稿 | iframe 解决跨域

记录工作中遇到的各种问题（Bug，总结，记录）

vivo 商品中台的可视化微前端实践

Scroll，你玩明白了嘛？

见识了电信流氓插iframe+分析解决方案

2021前端面试高频 HTML + CSS

RenderingNG中关键数据结构及其角色

layer弹出层详解

网页内容加速黑科技趣谈

利用 Python 爬取 QQ 空间说说和相册

用 Python 爬取 QQ 空间说说和相册

25个经典Selenium自动化面试题，赶紧收藏

油猴脚本从编写到检测

前端常见问题和技术解决方案

php layer弹出层更改背景,详解Layer弹出层样式

一、HTML

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐