在IE和安卓系统中防止在初始页面加载时显示iFrame - 腾讯云开发者社区

文章/答案/技术大牛

发布

Vue-cli3 项目在安卓低版本系统和 IE 上白屏问题解决

最近遇到一个问题，用 Vue 开发的项目在最近两年新出的安卓手机上没问题，在三四年前的旧手机上出现白屏问题。...分析一下应该是安卓系统版本的原因，目前已知的是Android 6.0 以上都 OK，6.0 以下就不行了。低版本安卓系统内置的 webview 不支持 ES6 语法等一些新特性，所以报错。...但在手机上调试不方便，受一篇文章的启发， IE 浏览器也是同样的问题，所以可以在 IE 上调试，一个调好了两个就都好了。...preset-env es6-promise babel-polyfill babel-plugin-transform-remove-console 复制代码以上五步配置完就可以解决 Vue 项目在低版本安卓系统和...IE 浏览器下显示空白的问题了。

3K1 0

Vue-cli3 项目在安卓低版本系统和 IE 上白屏问题解决

最近遇到一个问题，用 Vue 开发的项目在最近两年新出的安卓手机上没问题，在三四年前的旧手机上出现白屏问题。...分析一下应该是安卓系统版本的原因，目前已知的是Android 6.0 以上都 OK，6.0 以下就不行了。低版本安卓系统内置的 webview 不支持 ES6 语法等一些新特性，所以报错。...但在手机上调试不方便，受一篇文章的启发， IE 浏览器也是同样的问题，所以可以在 IE 上调试，一个调好了两个就都好了。...babel/preset-env es6-promise babel-polyfill babel-plugin-transform-remove-console 以上五步配置完就可以解决 Vue 项目在低版本安卓系统和...IE 浏览器下显示空白的问题了。

2.3K3 0

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

是的

没有找到

H5如何与原生App通信？

：由于安卓和ios的处理方式不一样，所以我们要分开处理先贴上判断访问终端的代码 //判断访问终端 function browserVersion(){ var u = navigator.userAgent...客户端中，我们首先要提到的是一个叫UIWebView的容器，苹果对他的介绍是： UIWebView是一个可加载网页的对象，它有浏览记录功能，且对加载的网页内容是可编程的。...Android容器在安卓客户端中，webView容器与手机自带的浏览器内核一致，多为android-chrome。不存在兼容性和性能问题。...RN容器在react-native开发中，从rn 0.37版本开始官方引入了组件，在安卓中调用原生浏览器，在IOS中默认调用的是UIWebView容器。...Android客户端调用H5方法在安卓APP中，客户端通过webview的loadUrl进行调用: // android JAVA code webView.loadUrl("javascript:

6.6K2 0

基于iframe的移动端嵌套

其中的一个需求为返回的时候从哪里点出去返回到哪里 7.某个安卓机后返回无法重新加载iframe 解决声明嵌入的iframe页面其中4个都是内部项目，同源的，所以大部分处理的问题不存在跨域问题。...: scroll;"> iframe>iframe> 并且在禁止浏览器的默认行为，不然类似于微信滑动到底部的时候会和回弹的效果进行冲突 $('body').on('touchmove...我的解决办法是在原项目下页面html,body依旧设置为100%，而初始化的时候js获取屏幕的宽度再设置body的宽度。...所以最后每次切换的时候，豆浆iframe给remove掉，在append加载新的iframe。...6.页面点击跳转之后，返回的状态标记使用了localStorage记录了url，navIndex 7.某个安卓机后返回无法重新加载iframe 返回后再append的iframe的代码下再让其重新渲染下

3.9K6 0

H5 手机 App 开发入门：技术篇

混合技术栈：页面本身就是网页，默认在 WebView 中显示。跨平台技术栈：提供一个 WebView 的语法，编译的时候将其换成原生的 WebView。...三、原生技术栈原生技术栈分成 iOS 和安卓两个平台。简单说，iOS 的原生技术栈就是使用 Object-C 语言或 Swift 语言，在 Xcode 开发环境中编程。...上面代码中，由于页面本身就是网页，所以可以直接用iframe标签插入外部网页。然后，在本机起一个 Web 服务，看看 Demo 的效果。...$ ionic serve 上面命令会自动打开浏览器窗口，访问本机的8100端口，在浏览器中显示网页效果。如果一切正常，在命令行窗口按 Ctrl+c，退出服务。...上面代码中，React Native 自身的WebView控件，编译时会分别转为 iOS 和安卓的原生 WebView 控件。接下来，预览页面效果。

8K4 1

【Web技术】252- Hybrid 应用中 H5 与 NA 通信的那点事儿

js 来完成，最终 webview 加载 H5 页面；入职百度后第一个做的成型的产品是 Hybrid App，在开发过程中研究了 H5 与 NA 通信机制，特对通信机制进行介绍。...举例在安卓中可以通过开启”设置“->”开发者选项“->”显示布局边界“，所有 NA 部分都会被框选出来，例如百度 App 中的首页，所有部分都有框选，整个页面都为 NA 实现；如下图所示； ?...("js + 原生渲染，框架代表：RN、Weex:share()"); 注：addjs + 原生渲染，框架代表：RN、WeexInterface 在安卓4.2以下存在安全漏洞； 2、NA 和 H5 通过...我们以音频下载举例：下载功能是 NA 实现，下载完成后 H5 页面内会显示相应的下载状态：已下载、未下载；触发的 H5 和 NA 交互流程如下： H5 需要在 App 启动时注册：监听下载状态，调用 JsBridge...后续在安卓的个别机型上使用 JsBridge 通信时，H5 连续两次跟 NA 通信，会存在消息被吞的情况，即 NA 的 shouldOverrideUrlLoading未被触发，我们当时采用延时的办法解决

2.9K2 0

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

页面使用Angular.js（1），页面中iframe中初始设置src属性的话，会导致页面重新加载一次例如设置一个初始值，某些操作之后再更改src iframe src="#" class="export-iframe...父页面中有iframe，iframe里面有分页按钮，在父页面对iframe做加载之后监听iframe中点击事件的操作，初始第一页正常，但点击第二页之后事件就失效了原代码： ?...12. iOS高版本中，在微信内访问网页，音频背景音乐无法自动播放其实在高版本浏览器中，基于安全措施，已经不允许自动播放音频了，但在微信内是可以的微信安卓环境下正常，但在高版本的iOS下就失效了，解决办法是在微信的...测试的时候发现，微信里页面的touchstart事件是不能取消的，即cancelable==false，在安卓的UC和Chrome中是为true的 ? ? 16....，比如中的src资源和css文件中的background-image属性中的src资源加载的顺序，资源并行加载的数量不清晰一堆的不清晰之中，尝试尽可能地在减小请求数与减小资源大小直接做平衡

19K1 2

js实用方法记录-js动态加载css、js脚本文件

js实用方法记录-动态加载css/js 附送一个加载iframe,h5打开app代码 1....style.appendChild(document.createTextNode(cssText)); }catch(ex) { // IE...动态加载iframe到body标签并执行回调方法调用：dynamicLoadIframe('http://www.yimo.link',function(){alert('加载成功')},'');...M站中下载/打开app 方法测试：openApp('ios页面','**.apk','metools://home'); function openApp(iosDownUrl,andDownUrl,appUrl...微信中不能打开其他app window.location.href = andDownUrl; return; } if (/android/.test(ua)) {//安卓手机尝试调用

19.3K3 1

深入理解iframe

iframe 用于在页面内显示页面，使用 iframe> 会创建包含另外一个文档的内联框架（即行内框架） iframe src="URL">iframe> 二、iframe 的常用属性 1、width...scrolling 规定是否在 iframe 中显示滚动条，值为 yes、no、auto 6、src 设置 iframe 的地址（页面/图片） 7、srcdoc 用来替换 iframe 中 html、body...另外在 iframe 中还可以实现异步加载 js 文件，不过，iframe 和主页是共享连接池的，现在基本上都被 XHR 和 hard calllback 取缔了六、自适应 iframe - 广告嵌入...Safari 3+ 和 Opera 9+ 可同时对一个域名打开 4 个连接，Chrome 1+, IE 8 以及 Firefox 3 可以同时打开 6 个绝大部分浏览器，主页面和其中的 iframe...这意味着 iframe 在加载资源时可能用光了所有的可用连接，从而阻塞了主页面资源的加载。如果 iframe 中的内容比主页面的内容更重要，这当然是很好的。

5.3K1 0

iframe 有什么好处，有什么坏处？

4.7K1 0

微信小程序 web-view 开发踩坑大全

另外：避免在链接中带有中文字符，在 iOS 中会有打开白屏的问题，建议加一下 encodeURIComponent 登录态小程序登录态与 web-view 页面登录态属于两套隔离的系统。...但是如果页面没有加载完，它是不准的，而且如果是 web-view 中进入到第二个页面，安卓也拿不到该值，总之就一个字”很不靠谱”。...web-view 页面中包括 iframe 首先iframe的域名得为业务域名，不然页面也会提示报错，无法正常显示。...其次 iframe 的页面里面不能使用官网上所记载的相关接口1 如果要在 iframe 中跳到其他小程序页面的话，安卓可以使用window.top.window.wx.miniProgram.xxxAPI...）总结最后的最后，不论在开发工具中显示良好或者不良好，都一定要用真机查看效果，而且 IOS 和安卓都要看下。

4.8K3 1

送你一份微信小程序 web-view 开发踩坑大全

另外：避免在链接中带有中文字符，在 iOS 中会有打开白屏的问题，建议加一下 encodeURIComponent 登录态小程序登录态与 web-view 页面登录态属于两套隔离的系统。...但是如果页面没有加载完，它是不准的，而且如果是 web-view 中进入到第二个页面，安卓也拿不到该值，总之就一个字"很不靠谱"。...web-view 页面中包括 iframe 首先 iframe 的域名得为业务域名，不然页面也会提示报错，无法正常显示。...其次 iframe 的页面里面不能使用官网上所记载的相关接口1 如果要在 iframe 中跳到其他小程序页面的话，安卓可以使用window.top.window.wx.miniProgram.xxxAPI...）总结最后的最后，不论在开发工具中显示良好或者不良好，都一定要用真机查看效果，而且 IOS 和安卓都要看下。

4.7K1 0

iframe跨域调用js_ajax跨域访问

没有根据Iframe里面的页面类容自适应高度 2.Iframe自适应高度代码在index.html文件中间中添加Iframe页面,页面加载时，加载src指定的文件路径 frameborder=”0″...跨域访问cookie 1.IE浏览器iframe跨域丢失Session问题在开发中,我们经常会遇到使用Frame来工作,而且有时是为了跟其他网站集成,应用到多域的情况下,而Iframe是不能保存Session...的因此,网上 … 在IE浏览器中iframe跨域访问cookie/session丢失的解决办法单点登录需要在需要进入的子系统B中添加一个类,用于接收A系统传过来的参数: @Action(value...默认情况下,如果嵌入本地Web页面,并在页面内部使用iframe来显示一个在线页面,加载的过程中会触发一个未捕获异常,虚函数CefV8ContextHandler::OnUncaughtExcepti...J 中的字母不重复,J 和 S中的所有字符 … Java数组的初始化 1.动态初始化数据类型 [] 变量名 = new 数据类型 [数组大小]; //数组的动态初始化 int [] arr = new

12K2 0

Web前端面试题小集

三、一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？...请求 5.浏览器跟踪重定向地址 6.服务器处理请求 7.服务器返回一个 HTTP 响应 8.浏览器显示 HTML 9.浏览器发送请求获取嵌入在 HTML 中的资源（如图片、音频、视频、CSS、JS等等）...10.浏览器发送异步请求四、请大概描述下页面访问cookie的限制条件跨域问题设置了HttpOnly 五、描述浏览器重绘和回流，哪些方法能够改善由于dom操作产生的回流 1.直接改变className...iframe会阻塞主页面的Onload事件；搜索引擎的检索程序无法解读这种页面，不利于SEO; iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。...308即可 ●输入m获取文章目录推荐↓↓↓ 前端开发更多推荐《18个技术类微信公众号》涵盖：程序人生、算法与数据结构、黑客技术与网络安全、大数据技术、前端开发、Java、Python、Web开发、安卓开发

1.2K9 0

绕过混合内容警告 - 在安全的页面加载不安全的内容

混合内容警告攻击者最近有个问题，因为他们的技巧只在不安全的页面有效，而浏览器默认情况下不从安全网站呈现不安全的内容。...考虑一点： IE/Edge (和其他浏览器) 拒绝从安全的域(HTTPS)加载不安全的内容 (HTTP) . 现代浏览器默认情况下不会渲染混合内容（来自安全站点的不安全数据）。...所以，它们决定允许图像标签加载一个没有警告的渲染器，除了地址栏右边的小挂锁会消失。这是地址栏在 IE 上加载不安全图片之前和之后的样子。注意主地址栏的安全协议根本不会改变。...这些奇怪的协议被使用者用来加载硬盘中的文件来检测本地文件的存在，如果主页是安全的，他们将有一个大问题：IE 将拒绝解析这些协议。因此不要使用他们的技巧！...谨记：当攻击者想要检查用户在她的文件系统中是否有特定文件，他们往往使用熟知的技术来利用 mhtml/res/file 协议。

3.7K7 0

Js框架设计之DomReady

5、因为浏览器渲染引擎是单线程的,如果头部脚本文件过多过大,会产生"白屏"现象,所以为了防止这种情况,我们应该将所有的脚本文件都放到标签之前,这一点在雅虎军规中也有提到。...iframe,他不会堵塞Dom构建,但是它会在加载DOM时和其他标签争抢资源(因为iframe会发送http请求,但是http请求有限),们经常看到一些新闻网,上面会挂许多iframe广告, 这些页面一开始加载时就很卡..."事件的名称,不过由于框架的需要, 它与真正的DomContentLoaded有区别,在旧的JS书籍中m都会让我们把Js函数写到window.onload函数中, 防止Dom树还没有建好...中这是可行的 } } } /** * 开始初始化domReady函数,判定页面加载在情况 start */ if...的情况 //在IE下,使Dom.domReady先于window.onload执行 //1、在老版本IE中onreadystatechange事件会触发在window.onload

1.6K6 0

如何全链路进行前端性能优化

也就是webview和类似于webview，这样的接口提供操作和显示网页的能力。目前使用WK的主流浏览器或者webview包括chrome，safari, 安卓平台以及众多的移动浏览器。...导航栏可以预加载，以前是在webview加载完成之后进行初始化，可以改为和webview并行一起加载。...提升滚动条的使用体验，原本是使用系统自带的滚动条的进度值，可以自己模拟滚动条的加载过程，让用户感觉页面加载变快了。也就是初始快速的加载到60%以上，给用户感觉加载很快的感觉。...调试时无需每次代码变更都编译打包，可即时查看更小效果，极大提高了开发人力。支持热更新，不需要每次发版都发布应用到商店，发版时间可以自由控制，安卓和ios同时发版。...安卓系统可以采用okhttp模块，他支持http2,http2可以在一个链接上一次性发送多个请求，支持gzip，也支持响应缓存避免网络重复请求，如果服务器配置了多个ip地址，当第一个ip链接失败的时候，

1.3K3 0

一文搞懂jsBridge的运行机制

我司的APP是一个典型的混合开发APP，内嵌的都是前端页面，前端页面要做到和原生的效果相似，就避免不了调用一些原生的方法，jsBridge就是js和原生通信的桥梁，本文不讲概念性的东西，而是通过分析一下我司项目中的...+ encodeURIComponent(messageQueueString); } 安卓拦截到url后，知道js给安卓发送消息了，所以主动调用js的_fetchQueue方法，取出之前添加到队列里的消息...但是，明显函数里还有不存在id时的分支，这里是用来干啥的呢，我们前面介绍的都是js调用原生方法，但是显然，原生也可以直接给js发消息，比如常见的拦截返回键功能，当原生监听到返回键事件后它会主动发送信息告诉前端页面...到此，安卓环境的js和原生互相调用的逻辑就结束了，总结一下就是： 1.js调用原生生成一个唯一的id，把回调和id保存起来，然后将要发送的信息（带上本次生成的唯一id）添加到一个队列里，之后通过iframe...ios ios和安卓基本是一致的，部分细节上有点区别，首先是协议不一样，ios的是这样的： var CUSTOM_PROTOCOL_SCHEME_IOS = 'https'; var QUEUE_HAS_MESSAGE_IOS

1.3K2 1

Clickjacking简单介绍

是一种视觉欺骗手段，在web端就是iframe嵌套一个透明不可见的页面，让用户在不知情的情况下，点击攻击者想要欺骗用户点击的位置。...;} }; iframe src="http://www.victim.com/"> 打开页面显示如下： ? 欺骗用户点击留在此页后显示： ?..."> 访问后页面显示： ? IE的xss筛选器自动拦截了跳转。...如果跟的参数中有变量在页面中显示的，会把变量过滤一遍再输出，但不会阻止跳转。四、Referer检查的问题有一些站点允许自己的域名嵌套自己，禁止外站对自己的嵌套。...五、location劫持在IE浏览器中，如果能够在防御代码的前面可以插入form表单的话，可以利用form表单对location进行劫持。

1.1K0 0

前端面试那些坑之HTML篇

（2）、标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。 2、HTML5为什么只需要写页面被加载完再加载; （3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题; 5、介绍一下你对浏览器内核的理解？...html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析; 即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的; 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重...之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。...*iframe会阻塞主页面的Onload事件； *搜索引擎的检索程序无法解读这种页面，不利于SEO; *iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

1.7K9 0

点击加载更多

Vue-cli3 项目在安卓低版本系统和 IE 上白屏问题解决

Vue-cli3 项目在安卓低版本系统和 IE 上白屏问题解决

H5如何与原生App通信？

基于iframe的移动端嵌套

H5 手机 App 开发入门：技术篇

【Web技术】252- Hybrid 应用中 H5 与 NA 通信的那点事儿

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

js实用方法记录-js动态加载css、js脚本文件

深入理解iframe

iframe 有什么好处，有什么坏处？

微信小程序 web-view 开发踩坑大全

送你一份微信小程序 web-view 开发踩坑大全

iframe跨域调用js_ajax跨域访问

Web前端面试题小集

绕过混合内容警告 - 在安全的页面加载不安全的内容

Js框架设计之DomReady

如何全链路进行前端性能优化

一文搞懂jsBridge的运行机制

Clickjacking简单介绍

前端面试那些坑之HTML篇

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐