使用iframe和ajax包含外部页面的内容有什么区别？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

求职 | 史上最全的web前端面试题汇总及答案2

12、xhtml和html有什么区别 ①HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言 ②最主要的不同： XHTML 元素必须被正确地嵌套。...而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。 19、iframe有哪些缺点？...①iframe会阻塞主页面的Onload事件，搜索引擎的检索程序无法解读这种页面，不利于SEO； ②iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。...使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题。...，闭包结构依然保存在；对页面的影响使用闭包会占有内存资源，过多的使用闭包会导致内存溢出等。

8.4K2 0

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

综合上面的缺点，在数据通信方面，没有使用 postMessage ，而是使用 vuex 替换掉 postMessage ，来完成 iframe 通信。...它包含以下关键内容：将 iframe 当成一个 dom 节点；父窗口渲染子窗口（ iframe ）暴露的组件；父子窗口共享 vue store； uni-render 的技术原理图如下： [图片]...通过上述 6 个步骤，就可以让用 iframe 做展示容器的商品预览页和商品管理页共享 store 啦。这里，小伙伴可能会有疑问，为什么要使用沙箱 vue 呢？...注意：商品中台不是主应用，它是一个嵌入外部业务的子应用，不具备外部业务嵌入它本身。微前端和普通的前端有什么区别呢？...六、总结综上，我们对商品中台的可视化和微前端做了整体的阐述，包含以下内容：通过 uni-render 技术方案解决了可视化页面 iframe 和父页面的数据通信问题。

1.5K5 0

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

是的

没有找到

在浏览器客户端进行爬虫开发

在浏览器端的爬虫实现，这里分为两个方面：一个是处理纯页面的请求，一个是处理Ajax的异步请求 1....(); }; document.body.appendChild(iframe); 代码很简单，直接先通过iframe的src加载需要的页面，iframe的内容加载成功再插入进行数据解析的逻辑默认开发者工具是不支持...jQuery的，但假如当前页面拥有jQuery，我们就可以直接使用了，如果没有，可以先插入一段引用本地JQ库的代码如此，已经可以解析到页面内容 ?...Ajax请求 Ajax的请求处理也类似在分析页面数据的获取时，有时候会发现数据是通过Ajax的异步JSON来获取的，我们相应的也使用这种异步方式用原生的Ajax未免代码量太多，可以直接借助JQ的实现...我们想找到包含某些关键字的页，方便定位这个页面的分页请求是异步请求，所以注入代码进行循环遍历请求，解析返回的JSON数据即可 var script = document.createElement('

2.6K1 0

前端性能优化（PC版）

将CSS和JS放到外部文件中，避免使用style和script标签引入在HTML文件中引入外部的资源可以有效利用浏览器的静态资源缓存。...避免页面中空的href和src 当link标签的href属性为空，或者script、img、iframe标签的src属性为空的时候，浏览器在渲染的过程中还是会把href和src的空内容进行加载，直到加载失败...使用可缓存的AJAX 对于内容相同的请求，有时候没必要每次都从服务器拉取，合理的使用ajax缓存能加快ajax响应速度并减少服务器的压力 $.ajax({ url : url, dataType...使用prefetch来完成网站预加载让浏览器预先加载用户访问当前页后极有可能访问的其他资源(页面，图片，视频等)，从而让用户有更好的体验 19....尽量避免使用table、iframe等慢元素内容的渲染是讲table的DOM渲染树全部生成完并一次性绘制到页面上，所以在长表格渲染时很耗性能，应该尽量避免使用，可以考虑用ul代替。

1.2K4 0

那些年前端跨过的域

，AJAX（Asynchronous JavaScript and XML，非同步的 JavaScript 与 XML 技术）都无法正常使用。...www.a.com 与 news.a.com 被认为是不同的域，那么它们下面的页面能够通过 iframe 标签嵌套显示，但是无法互相通信（不能读取和调用页面内的数据与方法），这时候我们可以使用 js 设置...该方案要做到父子页面的双向通信，需要用到 3 个页面：主调用页，数据页，代理页。...这是因为主调用页可以修改数据页的 hash 值，但是数据页不能通过 parent.location.hash 的方式修改父页面的 hash 值（仅 IE 与 Chrome 浏览器不允许），所以只能在数据页中再加载一个代理页...是 HTML5 XMLHttpRequest Level 2 中的 API，可以安全的实现跨域通信，它可用于解决以下方面的问题：页面和其打开的新窗口的数据传递多窗口之间消息传递页面与嵌套的 iframe

2.2K6 0

【JS应用】Iframe 解决跨域

基本原理 1、需要三个页面两个同域（a.com）的页面，一个和接口同域的页面（b.com）其中一个页面是父页面，也就是真正的内容页，展示数据的另外两个作为子页面，是辅助父页面请求跨域数据用的...1、localhost:3001 下有 a.html 和 c.html a.html 是内容页，需要使用数据的终端页（以下简称A） c.html 是辅助页（以下简称C） 2、localhost:3002...下有 b.html b.html 也是辅助页，用于请求数据（以下简称B）内容页 A 在 A 中，使用 iframe 嵌入了 B，并且全局设置了一个函数 getData 这个函数的作用是，为了给 C页面调用...很明显，这个函数是给我们的父页面调用的啦首先，cross 函数接收两个参数，options 和 callback，一个个解释 options 是一个对象，包含下面四个字段 targetUrl 用于请求接口...ajax({ 那么现在就只剩下我们的C 页面了从url 上获取到函数名，然后拿到父页面的 window（也就是 parent）直接调用，并且传入 window.name 这样，整个流程就走完了

19.4K1 1

每天10个前端小知识【Day 4】

把 iframe 宽高啥的调整到页面全部，这样用户进来除了域名，别的部分和银行的网站没有任何差别。...而且由于 Ajax 在后台执行，用户无法感知这一过程。因此，有了浏览器同源策略，我们才能更安全的上网。 3. xml和json有什么区别？...7、JSON不使用结束标记；XML有开始和结束标签。 8、JSON的安全性较低；XML比JSON更安全。 9、JSON不支持注释；XML支持注释。...说说你对以下几个页面生命周期事件的理解：DOMContentLoaded，load，beforeunload，unload HTML 页面的生命周期包含三个重要事件： DOMContentLoaded...Javascript本地存储的方式有哪些，有什么区别，及有哪些应用场景？

5971 0

动手写 js 沙箱

WeakMap 主要的问题在于,他可以完美的实现,内部变量和外部的内容的统一. WeakMap最大的特点在于,他存储的值是不会被垃圾回收机制关注的....>iframe> 这样已添加,那么下面的事,你都不可以做了: 1. script脚本不能执行 2. 不能发送ajax请求 3. 不能使用本地存储，即localStorage,cookie等 4....>iframe> 常用的配置项有: 配置效果 allow-forms 允许进行提交表单 allow-scripts 运行执行脚本 allow-same-origin 允许同域请求,比如ajax,storage...更多详细的内容,请参考: please call me HR. 接下来,我们来具体讲解,如果使用iframe来code evaluation....该API常常用在window和iframe的信息交流当中. 现在,我们回到上面的内容. <!

3.2K0 1

web跨域解决方案

这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的文档在同一域下的内容。　　...根据这个策略，在baidu.com下的页面中包含的JavaScript代码，不能访问在google.com域名下的页面内容；甚至不同的子域名之间的页面也不能通过JavaScript代码互相访问。...我们举例说明: 　　比如一个黑客,他利用iframe把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名和密码登录时,如果没有同源限制,他的页面就可以通过javascript读取到你的表单中输入的内容...比如上面的，http://www.a.com/a.js和http://70.32.92.74/b.js。虽然域名和域名的ip对应，不过还是被认为是跨域。...实现方法：这里是使用ajax来请求的，看起来和ajax没啥区别，其实还是有区别的。

3.2K10 0

HTML 面试知识点总结

常见的 stylesheet 指的是定义一个外部加载的样式表。 12. 页面导入样式时，使用 link 和 @import 有什么区别？（1）从属关系区别。...19. async 和 defer 的作用是什么？有什么区别？...《浏览器数据库 IndexedDB 入门教程》 37. iframe 有那些缺点？ iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。...主要缺点有：（1） iframe 会阻塞主页面的 onload 事件。window 的 onload 事件需要在所有 iframe 加载完毕后（包含里面的元素）才会触发。... 的 title 和 alt 有什么区别？

2.5K2 0

学员投稿 | iframe 解决跨域

基本原理 1、需要三个页面两个同域（a.com）的页面，一个和接口同域的页面（b.com）其中一个页面是父页面，也就是真正的内容页，展示数据的另外两个作为子页面，是辅助父页面请求跨域数据用的，不会显示在页面中...:3001 下有 a.html 和 c.html a.html 是内容页，需要使用数据的终端页（以下简称A） c.html 是辅助页（以下简称C） 2、localhost:3002 下有 b.html...b.html 也是辅助页，用于请求数据（以下简称B）内容页 A 在 A 中，使用 iframe 嵌入了B，并且全局设置了一个函数 getData 这个函数的作用是，为了给C页面调用，传入接口的数据的... 解决跨域的问题，但是实际上并不会这么做，肯定是封装得更加适用一些详情就看下面吧封装函数经过上面的说明，我们首先要明确我们的目的 1、iframe 2、两个辅助页 3、数据回调所以我们封装的函数必须要满足这几个东西...很明显，这个函数是给我们的父页面调用的啦首先，cross 函数接收两个参数，options 和 callback，一个个解释 options 是一个对象，包含下面四个字段 targetUrl 用于请求接口

2.8K3 0

https中引入http资源资源所导致的问题

2. app中嵌入了h5页面，而这页面在以前的设计中是使用http访问的，如果换成https地址，极有可能将导致h5页面无法打开。　　3....*/ 混合内容当用户访问使用https页面时, 他们与web服务器之间的连接是使用SSL加密的, 从而保护连接不受嗅探和中间人攻击....浏览器出现以上混合内容显示的问题，是因为https协议请求的站点，读取的资源文件js、css、图片、音视频，甚至包括请求post和get，还有iframe的页面，都必须是https协议的。...最笨办法直接复制原有代码, 写成两套代码,一套为https使用,一套为http使用,http和https各自指向各自服务全站http换成https 将所有页面中的图片、视频、音乐、js，css，ajax...如果两个页面的内容都可以控制的话，当前窗口可以 iframe 窗口进行通信。

5K8 2

WebKit三件套(3)：WebKit之Port篇

WebKitPort方面的内容是可以很广的，例如可将不同的图形库、网络库与WebCore集成，提供不同的Port接口供外部程序使用等，例如同样在windows平台上可以运行的Google Chrome和...我们想了解有关Port方面的主要内容在于提供不同的Port接口供外部程序使用以及如何与外部程序交互，因为WebKit中的其它两部分WebCore、Javascript实现，从逻辑上讲是不直接提供接口给外部程序使用的...通过前面的了解我们知道WebKit的主要功能集中在分析Html、渲染布局Web内容以及Javascript实现方面等，而这些Web内容显示在哪个窗口及消息处理的启动循环等都需要由外部程序来提供。...前一阶段正好得到一个网友抓取网页的需求，试想目前移植利用WebKit基本都用来显示页面，往往涉及图形显示方面，但随着ajax及动态页面的广泛使用，未来动态生成的页面越来越多，传统的搜索引擎仅仅抓取静态的页面内容显然是不够的...一点想法，今后有机会可以试试，或许Google、Yahoo的搜索引擎已经有了相关的实现，不知是否使用的就是WebKit?应该不会，有谁清楚的话，烦请通知一声。

2.6K1 0

跨域分析以及通解

同源策略同源策略（Same Orgin Policy）是一种约定，它是浏览器核心也最基本的安全功能，它会阻止一个域的js脚本和另外一个域的内容进行交互，如果缺少了同源策略，浏览器很容易受到XSS、CSFR...由于同源策略限制的内容还包括 cookie、localStorage、indexDB无法读取 DOM无法获取 AJAX不能发送解决方式 jsonp绕过浏览器的同源策略，通过websocket/cors...一级域名相同，二级域名不同的情况下，可以设置document.domain相同，就可以共享cookie 以iframe和window.open方法打开的窗口为例，有三种方法可以跨域: url后#片段识别符携带传递参数...它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。 CORS需要浏览器和服务器同时支持。...postMessage跨域 postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题：页面和其打开的新窗口的数据传递

1.6K3 0

爬虫 | selenium之爬取网易云音乐歌曲评论

在使用 Ajax 技术加载数据的网站中， JavaScript 发起的 HTTP 请求通常需要带上参数，而且参数的值都是经过加密的。...问：那么是否有办法绕过这机制，直接获取网站数据？答：有的。使用 Selenium 库模拟浏览器行为来抓取网站数据，达到事半功倍的效果。...3）爬取第一页面的评论的数据，然后存储到数据库中。 4）利用 Selenium 模拟点击下一页按钮，再继续爬取该页面的评论数据，并存储到数据库中。 5）一直循环点击，直到所有分页的数据都被爬取完成。..., 必须切换到 iframe, 才能定位的到 iframe 里面的元素 iframe = brower.find_element_by_class_name('g-iframe') brower.switch_to.frame...我们访问使用 Ajax 加载数据的网站的整个过程： ? END

2.4K2 2

爬取《Five Hundred Miles》在网易云音乐的所有评论

题图：by cfunk44 from Instagram 在使用 Ajax 技术加载数据的网站中， JavaScript 发起的 HTTP 请求通常需要带上参数，而且参数的值都是经过加密的。...问：那么是否有办法绕过这机制，直接获取网站数据？答：有的。使用 Selenium 库模拟浏览器行为来抓取网站数据，达到事半功倍的效果。...3）爬取第一页面的评论的数据，然后存储到数据库中。 4）利用 Selenium 模拟点击下一页按钮，再继续爬取该页面的评论数据，并存储到数据库中。 5）一直循环点击，直到所有分页的数据都被爬取完成。..., 必须切换到 iframe, 才能定位的到 iframe 里面的元素 iframe = brower.find_element_by_class_name('g-iframe') brower.switch_to.frame...我们访问普通网站的整个过程：点击查看大图我们访问使用 Ajax 加载数据的网站的整个过程：

1.1K2 0

前端面试题ajax_前端性能优化面试题

jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面 4，http状态码有那些？分别代表是什么意思？...xmlHttp.onreadystatechange = function(){ if(xmlHttp.readyState === 4 & xmlHttp.status === 200){ } } 11、XSS与CSRF有什么区别吗...它包含证书，卸载，流量转发，负载均衡，页面适配，浏览器适配，refer传递等。保障了传输过程的安全性 14、GET和POST的区别，何时使用POST？...代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取重要内容不要用js输出：爬虫不会执行js获取内容少用iframe：搜索引擎不会抓取iframe...中的内容非装饰性图片必须加alt 提高网站速度：网站速度是搜索引擎排序的一个重要指标 16、什么是Ajax和JSON，它们的优缺点 Ajax是异步JavaScript和XML，用于在Web页面中实现异步数据交互

3.1K1 0

layer弹出层详解

目前，layer已成为国内最多人使用的web弹层组件，GitHub自然Stars3000+，官网累计下载量达30w+，大概有20万Web平台正在使用layer。...layer如何获取父界面的元素，比如我点击新增按钮，在layer框编辑后提交，是如何关闭当前layer框，额，关闭layer框很简单，但是如何关闭后根据父界面的form表单向后台发起Ajax请求，，刷新信息...即：layer子界面如何调用父界面的方法。如果你不想使用Layui，而只是想使用layer，你可以去layer独立组件官网下载组件包。...); //再执行关闭 layer.getChildFrame(selector, index) – 获取iframe页的DOM 当你试图在当前页获取iframe页的DOM元素时，你可以用此方法。...//得到iframe页的body内容 8 body.find('input').val('Hi，我是从父页来的') 9 } 10 }); 11 layer.getFrameIndex

6.7K2 0

HTML和CSS面试题及答案总结一

html语义化，让页面的内容结构化，便于对浏览器和搜索引擎的解析，在没有css样式的情况下，以文档的形式同样易于阅读，符合文档语义的标签。...12.html5的存储类型有什么区别？...cookie在所有的同源窗口都是共享；sessionstorage不在不同的浏览器共享，即使同一页面；localstorage在所有同源窗口都是共享。 21.iframe框架有那些优缺点有哪些呢？...但有时候我们希望关闭输入框的自动完成功能，例如当用户输入内容的时候，我们希望使用AJAX技术从数据库搜索并列举而不是在用户的历史记录中搜索。...它经常包含版权信息、法律信息链接和反馈建议用的地址。 5）aside：定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。 27.你知道多少种Doctype文档类型？

1.7K1 0

前端优化

CSS中的Expressions Make JavaScript and CSS External 将脚本文件和样式表作为外部文件引用 Avoid Redirects 避免重定向 Minify JavaScript...and CSS 最小化JAVASCRIPT和CSS Remove Duplicate Scripts 除重复的脚本,不光是文件,甚至是同功能的函数 Configure ETags 配置ETags...Make Ajax Cacheable 使AJAX调用尽可能利用缓存特性 Flush the Buffer early 尽可能早地发送缓冲区内容 User Get for AJAX Requests...为AJAX请求使用GET方法 Post-load Components 延迟或按需加载内容 Preload Components 预加载组件 No 404s 不要出现404页面 Reduce the...of Dom Elements 减少DOM元素数量 Spilt Components Acorss Domains 跨域分离组件 Minimize the Number of iframes 减少iframe

6442 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭