移动端iframe嵌套页面不清晰

2024-10-21

基于iframe的移动端嵌套

需求描述上上周接到了新的项目,移动端需要做一个底部有五个导航,点击不同的导航页面主体显示不同的页面,其中两个页面是自己做,而另外三个页面是引用另外三个网址,其中两个网址为内部项目,另外一个为外部(涉及跨域). 问题考虑再三后最省时间成本的就是使用iframe,虽然在移动端使用,我的内心是很拒绝的,不过其他方案调研了下都不太符合现状.每点击一次加载一个新的iframe,比较懒,所以两个新页面也做成了iframe,在做的过程中出现了如下问题,这里总结一下: 1.嵌入的iframe页面无法滚动 2

easyui 中iframe嵌套页面，大弹窗自适应居中的解决方法。$('#win').window()

easyui 中iframe嵌套页面,大弹窗自适应居中的解决方法.$('#win').window() 以下是左边栏和头部外层遮罩显示和隐藏方法 /*外层遮罩显示*/ function wrapMaskShow(){ var maskTop = window.top.$("#mask-top");//外层遮罩 var maskLeft = window.top.$("#mask-left"); maskTop.show(); maskLeft.show(); $(

easyui 中iframe嵌套页面，提示弹窗遮罩的解决方法，parent.$.messager.alert和parent.$.messager.confirm

项目中用到easyui 布局,用到north,west,center三个区域,且在center中间区域嵌入iframe标签.在主内容区做一些小提示弹窗(例如删除前的弹窗提示确认)时,会遇到遮罩问题,由于center区域是iframe嵌套的,所以里面的小弹窗无法覆盖页面的头部和左边目录栏. 情形一.点击提示弹窗里的确认后,提示弹窗消失: //warnTips为传入的值,例如successMask(“确定要删除选中的数据吗?”) function successMask(warnTips){ par

iframe嵌套页面中的跳转

简单说一下场景. 假设有A.B.C和D四个JSP页面,D通过iframe嵌套在C中,C通过iframe嵌套在B中,B通过iframe嵌套在A中. 然后现在在D中编写JavaScript代码跳转页面. 在本页面跳转(D页面所在的iframe中跳转) window.location.href = '要跳转的页面路径'; 在上一层跳转(D页面所在iframe的父页面中跳转,即C所在的iframe中跳转) parent.location.href = '要跳转的页面路径'; 如果要在B所在的iframe

关于使用iframe嵌套页面的跳转方式

一.背景A,B,C,D都是jsp,D是C的iframe,C是B的iframe,B是A的iframe,在D中跳转页面的写法区别如下. 二.JS跳转window.location.href.location.href 本页面跳转,D页面跳转 parent.location.href 上一层页面跳转,C页面跳转 top.location.href 最外层页面跳转,A页面跳转三.链接或者formD页面中有form <form>: form提交后D页面跳转 <form target="

Jquery如何获得<iframe>嵌套页面中的元素

DOM方法:父窗口操作IFRAME:window.frames["iframeSon"].documentIFRAME操作父窗口: window.parent.documentjquery方法:在父窗口中操作选中IFRAME中的所有输入框: $(window.frames["iframeSon"].document).find(":text");在IFRAME中操作选中父窗口中的所有输入框:$(window.parent.document).

iframe嵌套页面的跳转方式

一.背景A,B,C,D都是jsp,D是C的iframe,C是B的iframe,B是A的iframe,在D中跳转页面的写法区别如下. 二.JS跳转window.location.href.location.href 本页面跳转,D页面跳转parent.location.href 上一层页面跳转,C页面跳转top.location.href 最外层页面跳转,A页面跳转三.链接或者formD页面中有form<form>: form提交后D页面跳转<form target="_bla

window.postMessage()实现(iframe嵌套页面)跨域消息传递

window.postMessage()方法可以安全地实现Window对象之间的跨域通信.例如,在页面和嵌入其中的iframe之间. 不同页面上的脚本允许彼此访问,当且仅当它们源自的页面共享相同的协议,端口号和主机(也称为“同源策略”).window.postMessage()提供了一个受控的机制相对来安全地规避这个限制. 发送消息的基本语法: targetWindow.postMessage(message, targetOrigin, [transfer]); targetWindow就是接

iframe嵌套页面跨域

父级调用iframe方法: document.getElementById("iframe").contentWindow.func(data1,data2...) 子级 iframe中调用父级html中方法: parent.func(data1,data2...) 使用的前提条件是要在同域名下,想要如果域名不同,甚至端口不同,都会存在跨域的问题. 简单示例demo: a.html 页面 <html> <head> <meta http-equ

iframe嵌套页面音频在微信公众号环境无法播放

在微信公众号中没有iframe的时候window.WeixinJSBridge为对象,有iframe时为undefined 要使用 window.parent.WeixinJSBridge得到 if(window.WeixinJSBridge || window.parent.WeixinJSBridge) { this.play() }

vue iframe嵌套页面高度自适应 (ios 宽度扩大的bug , ios展示比例问题)

<template> <div class="card-index pt-relative"> <div id="wrapper" :style="'height:'+Height+'px;'"> <iframe v-if="iframeType" :src="srcUrl" sandbox=&

easyui-tabs 在ie8下基于iframe嵌套页面加载成功后切换空白问题

这是一个很坑的问题,由于项目必须支持ie8的情况下,产生了这个问题.在我进行逐步对比的分析过后,终于发现了原因所在:

iframe嵌套的页面之间传值问题

项目中很多时候会遇到需要用 iframe 嵌套页面的情况.有时候会有这样的需求: iframe 嵌套的页面 A ,点击之后要跳到页面 B ,但是同时还需要 A 页面中的某个属性值. 此时可以先把 A 页面的属性值赋值给最外层的父页面,然后再赋值给 B 页面. A 页面的值赋值给最外层的父页面: 如父页面有个隐藏的button元素 <input type="button" id="parentID" value="" /> 赋值给此元素

移动端web页面列表类上拉加载，查看详情，iframe嵌套第三方页面遇到的问题以及解决办法

1.移动端上拉加载网上有很多成熟的插件,比如iscroll.在这里介绍一下用jquery和js写的上拉加载方法.使用原生的去写上拉加载更多需要三个高度去做对比,以新闻类列表举例,首先需要整个dom的高度,其次需要移动设备窗口的高度,最后需要滚动条距离顶部的高度,移动设备的高度加上滚动条距离顶部的高度等于dom的高度时,表示已经滑动到底部,进而加载下一页,监听滚动条的滑动事件使用scroll()方法.当然这里也可以进行无感知加载,就是当移动设备高度和滚动条高度相加和dom高度接近时就加载下一页的

页面中iframe中嵌入一个跨域的页面，让这个页面按照嵌入的页面宽高大小显示的方式；iframe嵌套的页面不可以编辑的问题解决方案

<html> <head> <style> body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; overflow: hidden; } </style> </head> <body> <iframe src="http://gongkai.kaipuyun.cn/databaseInfo/index"

iframe嵌套vue页面打开新窗口

iframe嵌套vue页面时目录结构为下图: 此时出口文件指向index.html, 所以只需要用a标签动态拼接href, 并设置属性 target="_blank" ,即可在iframe打开新窗口

vue中嵌套页面 iframe 标签

vue中嵌套iframe,将要嵌套的文件放在static下面: <iframe src="../../../static/bear.html" width="300" height="300" frameborder="0" scrolling="auto"></iframe> src可以使用相对路径,也可使用服务器根路径http:localhost:8088/…等: <i

使用ajax与iframe嵌套实现页面局部刷新

使用ajax与iframe嵌套实现页面局部刷新.该javascript代码仅供参考,需按自己需要修改.1. [代码]javascript代码 function cj_start(depname,groupid){ var urls = "<%=path%>/userGather.action"; var status = ""; var html_1 = "<iframe frameborder=\"0\&q

vue 给嵌套的iframe子页面传数据 postMessage

Vue组件下嵌套了一个不同域下的子页面,iframe子页面不能直接获取到父页面的数据,即使数据存在localStorage中,子页面一样是获取不到的,所以只好使用postMessage传数据: <iframe src="http://127.0.0.1:8888/index.html" class="mapFrame" ref="mapFrame"></iframe> 父页面发送数据参数: <script> e

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

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

关于https域名下的页面iframe嵌套http页面的问题

业务场景:在一个https域名下用iframe嵌套一个http域名的页面,会直接报错的,报错信息如下: 这段话的意思是:http域名的页面是通过https域名页面加载的,在一个安全的页面不允许加载一个不安全的路径的页面: 解决方案-:http域名需要配置证书为https的,保证两个页面的域名都是https开头的: 解决方案二:每个用户想要看到嵌套页面可以跳转的,都要在浏览器里面的设置--设置隐私和安全性--网站设置--不安全内容--允许--添加那两个域名,也可以实现跳转:

移动端iframe嵌套页面 不清晰

热门专题

移动端iframe嵌套页面不清晰