移动端iframe不展示

2024-11-07

解决iframe在移动端(主要iPhone)上的问题

前言才发现已经有一段时间没有写博客了,就简单的说了最近干了啥吧.前段时间忙了杂七杂八的事情,首先弄了个个人的小程序,对的,老早就写了篇从零入手微信小程序开发,然后到前段时间才弄了个简单的个人小程序,主要是关于菜式方面制作的,原因么,就在我另外一件事情上有说到了,就是然后又弄了个个人的公众号<前端美食汇>(附:个人介绍链接).大概之前就干了这两事.不过老实说也不用多少时间.搞得好像用了我很多时间似的,哈哈,还是懒~~~ 重点补充下,以为博客的文章的侧重点会在解决项目上遇到的实际问题,而在公众号

用css巧妙实现移动端横向滑动展示功能

前言:记得以前处理移动端横向滑动展示都是去用js去解决的,要用js进行蛮多处理,要算li的宽度,然后还要用js设置ul盒子的宽度,又要设置最大滑动距离,最小滑动距离等等.......但是现在发现用css就能很好的解决这功能. 一.直接上代码.<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type&quo

从后台读取项目文件在前端iframe中展示

项目中有个需求是: 对于外部提供的前端项目,包含css.js.html.图片等的项目,将这个项目存进数据库,然后iframe中展示html,然后html中引用的js.css等文件也能从数据库中读取并正确的展现: 所以其实我们这边分为两步: 1)将整个项目,中的所有文件,js.css等都以路径形式存进数据库,路径其实就是js等文件在html中的引用路径: 2)iframe中引用了HTML,然后html中js等文件从数据库读取出来,正确引用: (其中,参考了博客: https://www.cnbl

酷版移动端iframe改变src，重新加载页面问题探究

最近在酷版上我要做一个内嵌别人的网页的在线服务页面,于是必须用到iframe,以前我以为移动端不支持iframe呢,原来这样都可以....(呵呵,长见识了!我还是只菜鸟) 直接入正题,说说我遇到的困难或者说是我需要解决的问题: 1.重构人员提供页面之后,我给页面上的iframe设置一个src属性,发现那个页面根本不能上下滑动.我就到处搜,有的人说酷版移动端iframe里面不会像pc端一样自动产生滚动条,我真的信了!于是我不得不让产品去和即将上线的几个合作方谈一下,让他们在页面里设置一个docum

【css】用css巧妙实现移动端横向滑动展示功能

前言:记得以前处理移动端横向滑动展示都是去用js去解决的,要用js进行蛮多处理,要算li的宽度,然后还要用js设置ul盒子的宽度,又要设置最大滑动距离,最小滑动距离等等.......但是现在发现用css就能很好的解决这功能一.直接上代码. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Conte

移动端 iframe的使用

对于iframe的设定有几个css属性常用 overflow:hidden;width:100%;当这样使用inframe内部中使用overflow,iframe会被撑开,导致width与overflow配合失效,例子(空了再写) 解决办法:iframe中的body设定与iframe同样的width(但不能100%必须是固定的px) iframe自适应高度,仅修改iframe代码,不用对其他页面进行修改 var iframes = window.parent.parent.document.qu

移动端布局Demo展示图文

上两张图自勉一下(来自刘墉先生的文章,最近看他的作品):然后移动端该愈来愈受到重视,未来的市场我不知道,不过我知道手机的功能越来越强大是不争的事实!移动端布局的积累也需要从现在做起! 需求一:实现下图效果,注意不同手机的型号:原生称为适配,我们称为自适应不变形思路一:btn+ima布局风格 <div class="row margin-top"> <div class="col-sm-12"> <div class="for

VUE-003-前端表格数据展示时，设置单元格（el-table-column）保留空格和换行

在使用 el-table 展示数据时,单元格中的数据有可能存在空格和换行符,若不进行设置,浏览器默认会取消空格和换行符,如下所示: 解决方法: 将单元格的样式 “white-space” 属性设置为“pre-wrap” 即可解决.在VUE页面中添加如下样式设置 <template> ... </template> <style> .el-table .cell.el-tooltip { white-space: pre-wrap; } </style> &l

移动端与Web端疫情数据展示

1.题目要求 2.整体思想首先是在前两阶段已经完成的echarts可视化.利用Jsoup爬取疫情数据基础上来进行调用与完善.大致思想是在Android Studio上完成交互去调用ecplise中的Servlet,我新建了两个Servlet为PaquServlet.SearchServlet分别用来接受进行移动端的请求,与Web端的YqServlet分开来,当然也可以不新建Servlet直接调用Web端的YqServlet也是可以的.PaquServlet就是接收到移动端的调用之后开始执行,爬

pdf.js-----后端返回utf-8数据流，前端处理数据展示pdf

需求:做项目联调接口时,发现知识库展示pdf未果,经与后端人员沟通,发现以下问题: 1.接口返回的是utf-8数据流,但是前端调用的是base64解析方法: 导致功能有误: 方案一:将后端返回的utf-8数据流改为经base64解析的数据流. ========新思路:尝试缓加载,但是未能实现. 测试结果:安卓系统可以正常使用,但是ios当时存在闪退的问题,且base64若处理一个2M的文件,解析后体积将近为4M,对小文件还是用,大文件很容易造成系统运行内存不够,跳出App. 方案二:用if

基于 iframe 的微前端框架 —— 擎天

vivo 互联网前端团队- Jiang Zuohan 一.背景 VAPD是一款专为团队协作办公场景设计的项目管理工具,实践敏捷开发与持续交付,以「项目」为核心,融合需求.任务.缺陷等应用,使用敏捷迭代.小步快跑的方式进行开发及质量跟踪,简化工作流程,帮助团队快速迭代并高效完成产品开发交付. 但早期VAPD以"一切皆可配置"的设计理念开发运行了两年,整个前端代码复杂混乱,组件庞大(需要支持多种配置),状态混乱,前端代码打包出来有50M之巨.这个项目难以为继,bug多.维护困难.新增功能处

Session失效之 IE iframe cookie问题(p3p)

项目中,在做门户系统时,使用了iframe嵌套展示各个子系统的页面,其中有个页面在ie8下,始终无法正常登陆. 后来项目经理分析,应该是iframe跨域导致,赶忙查看了连接地址,还真是一个跨域的页面. 于是想到了p3p方案(网上查到了一些设置): 只需要设置 P3P HTTP Header,在隐含 iframe 里面跨域设置 cookie 就可以成功. (‘在隐含 iframe 里面’这里应该指的是iframe的src那个页面吧,不过我是在主页面和嵌套页面都设置了,有机会再确认下) ASP直接在

简单的利用JS来判断页面是在手机端还是在PC端打开的方法

在移动设备应用越来越广泛的今天,许多网站都开始做移动端的界面展示,两者屏幕尺寸差异很大,所以展示的内容也有所差别.于是就遇到一个问题,如何判断你的页面是在移动端还是在PC端打开的,很简单的问题,那我们就简单点来说,以我们公司的官网来说,PC端和移动端的官网界面分别如下: Navigator对象首先来了解一下Navigator 对象,Navigator 对象包含有关浏览器的信息,下面的userAgent 属性是一个只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值.所以我们可以通过判

[移动端] IOS下border-image不起作用的解决办法

上周五突然接到现场的一个需求,做一个移动端的劳模展示页面.现场美工把原型图发了过来.这个样子的: 说实在的很想吐槽一下我们美工的审美哈,不过这不是重点. 因为边框是需要特殊花纹的所以打算用border-image实现. .example{ -- border:6px solid transparent; -webkit-border-image:url(../img/border_img.jpg) 6 6 round; border-image:url(../img/border_img.jpg

HTML的iframe标签妙用 - 在线执行前端代码的网站原理是什么？

在我自己的日常前端开发中,其实iframe标签出现的次数并不是很多.作为一个很古老(浏览器兼容性非常好)的标签,有必要去了解一下它的典型应用场景. (图片说明:所有浏览器都支持iframe,无论什么版本) 在什么情况下使用iframe呢?其实iframe有很多奇技淫巧的用法,但是最重要的一个特点是:<iframe>提供了一个和浏览器当前窗口相隔离的沙箱环境,相当于网页内部新开的另一个窗口.<iframe>外部的css/javascript,不会影响到<iframe>里面

『集群』003 Slithice 最简分布式(多个客户端，一个独立服务端)

Slithice 最简分布式(多个客户端,一个独立服务端) 案例Demo 展示: 我们搭建一个可以独立运行的服务端:然后多个客户端并发链接这个服务端完成分布式逻辑: 服务器独立运行,并不依赖集群的力量: 配置文件如何写: >服务端配置文件和代码: >客户端配置文件和代码: >服务端启动一个 Socket 服务,这个服务是可以自己写的 —— 并不一定非得使用 Slithice 的服务端代码: >客户端 testTransfer 对象就具备了

ASP.NET MVC Display Mode 移动端视图配置对微信内置浏览器的识别

最近在捣鼓一个稍微有点low的商城网站,没有计划做app却要求有个wap版,而前端又没有做成响应式,时间WTF,直接利用了asp.net mvc的Display Mode Provider. 使用方式依照上面的链接地址,asp.net mvc application启动的时候会在全局变量 DisplayModeProvider.Instance.Modes 集合中加入 DisplayModeId == "Mobile" 的 IDisplayMode ,因此如果想要在移动端浏览器中展示移

ios中iframe的scroll滚动事件替代方法

在公众号的开发中,遇到ios中iframe的scroll滚动事件失效,在此做下记录. 因为接口获取的数据必须放在iframe中展示,滚动到底部按钮变亮,如图: 代码如下: <!DOCTYPE html> <html> <head> <title>贷款合同</title> <% include ../include/header.html %> </head> <body style="background:

iframe的Dom操作

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

ASP.NET+d3.js实现Sqlserver数据库的可视化展示

效果: 数据库端: 前端展示: 实现原理: 1.在数据段建立两个存储过程 queryUserAnsawer(id) 根据用户ID返回每一题的得分,主要是bcp exe时不能直接在sqlserver中执行sql查询语句,只能先调用存储过程 exportUserAnsawer(id,filepath,re)根据指定的ID调用queryUserAnsawer,根据物理路径导出csv文件,re用来判断导出是否成功 2.使用aps.net的cs文件生成filepath,然后调用exportUserAnsa

「移动端」Web页面适配

一.什么是移动端适配移动端 Web 页面,就是常说的手机 h5页面.webview页面.公众号开发的网页等. 由于手机机型较多,各个手机的屏幕尺寸不一样,所以做移动端页面,需要考虑在安卓和ios的各种尺寸设备的兼容问题,我们要做的 web 页面适配,就是为了在不同设备上,页面能够保持统一展示效果,或等比缩放. 二.移动适配方案常见的移动适配方案有以下几种: viewport 盒模型 flex rem 2.1.viewport - 可视区最初手机端需要照顾 PC 端,如果不设置 viewpo

移动端iframe不展示

热门专题