多个 iframe,每个都包含的同一个 jsp,会怎样?

本贴最后更新于 3096 天前,其中的信息可能已经时移世易

我们有个功能,要显示一系列的图表,图表的显示是根据 controller 返回的参数通过 js 来调用 echarts 的接口进行生成的
目前,这个页面都是同一个,为了能够显示多个,放在了多个 iframe 中,如下图所示
QQ 截图 20160930163018.png
我通过 jquery 动态添加 iframe,并在添加的时候传入不同的参数,以期达到显示不同的图标的目的
然而现在出现了有的是不同的,有的是相同的(可以显示不同的,说明还是有点作用的,但是应该由于多个 iframe 中的加载次序、用时的关系,导致有的时候用了相同的参数)
请问大家,有好的解决方案么?我会以 100 积分作为酬劳哟~ 🙏

  • 求助
    49 引用 • 401 回帖 • 1 关注
  • 技术

    到底什么才是技术呢?

    88 引用 • 179 回帖 • 4 关注
  • 工作

    快乐工作,认真生活。

    140 引用 • 1472 回帖 • 6 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • Angonger 1

    没明白意思,有时候用了相同的参数啥意思

  • 714593351 1

    为啥要用 iframe。。。。 快抛弃 iframe 吧

    1 回复
  • 88250 1

    F12 看请求一定可以看出点什么的

    1 回复
  • ZephyrJung

    请求很正常呢,感觉就是参数被多个 iframe 加载的时候共用了

    1 回复
  • ZephyrJung

    有啥好办法么 orz
    话说图表渲染的代码也不是我写的,有心无力啊唉……

    1 回复
  • 88250

    其实我没看懂你的问题

    1 回复
  • 714593351

    其实我也没看懂你的问题

    1 回复
  • ZephyrJung

    看来我的表述能力真的太差了 orz
    总之就是多个 iframe 标签的 src 指向了同一个 jsp,那个 jsp 根据不同的参数应该显示不同的图案,但是现在会出现相同的问题

    1 回复
  • ZephyrJung

    我想哭……

  • 88250

    src 到底是相同还是不同?

    1 回复
  • 714593351

    改成 DIV 吧,然后 ajax 请求,渲染不同的图表。。。

    1 回复
  • ZephyrJung

    相同

    1 回复
  • alanfans 1

    问题没表达清楚。

    1 回复
  • ZephyrJung

    感觉要动很大,那不是我写的地方,,那个人也不知道会不会愿意改,因为时间挺紧了。。

  • 88250

    src 相同的话嵌入的 HTML 就是一个啊,何来参数不同之说?

    1 回复
  • ZephyrJung

    哎,感觉都不知道咋说了

  • ZephyrJung

    src 的地址指向了同一个 controller,那个 controller 会返回不同的参数到页面上

    1 回复
  • 714593351

    明白了,不过 iframe 参数不同也没问题的啊,莫非参数写成一样了。。。

    1 回复
  • 88250

    你说的 src 是包含了 query string 还是不包含?

    1 回复
  • ZephyrJung

    是不是因为加载的同一个页面,它的参数会相互影响,如果没有在时间上分开的话?

    1 回复
  • 714593351

    感觉不会啊,多个请求之间不会有影响的啊

  • ZephyrJung
    $("#overview").append("<iframe frameborder='0' src='"+$ctx+"/overview/queryOverviewById?reportVo="+reportVo+"' width='100%' height='500px'></iframe>");

    代码就是这个啦,queryOverviewById 的参数会被 controller 返回到页面上,都是同一个页面,但是返回来的参数不一样,这个页面会根据参数不同来显示不同的图案

    2 回复
  • 88250

    再看下发出的请求,确定都是不同 URL 的?

    1 回复
  • ZephyrJung

    不同,我对了一下。
    我主要是想确定一下这种用法会不会有问题,就是多个 iframe 加载带不同参数的同一个 jsp
    对了,怎么才能提高语文水平 😂

    2 回复
  • 88250

    换个浏览器看看?

  • alanfans

    一个 jsp 里,你改成 ajax 吧。看着你的问题好绕啊。js 定义三个不同的参数,传入同一个 ajax,返回得到三个不同的值,

  • alanfans

    echarts 和 highchart 用法都差不多。

  • crick77 1

    用 include page

  • fengche361 1

    赶紧抛弃 iframe 吧,用 div

请输入回帖内容 ...
ZephyrJung
一切有为法,如梦幻泡影,如露亦如电,应作如是观 北京

推荐标签 标签

  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    245 引用 • 1338 回帖 • 1 关注
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现,服务器端用 Erlang 语言编写,支持多种语言客户端,如:Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 354 关注
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等,它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比,Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 382 关注
  • 酷鸟浏览器

    安全 · 稳定 · 快速
    为跨境从业人员提供专业的跨境浏览器

    3 引用 • 59 回帖 • 45 关注
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据(或者事件)流的 API。它组合了观察者模式,迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 174 关注
  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架,使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用,例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 32 关注
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞 I/O 模型而得以轻量和高效。

    139 引用 • 269 回帖
  • JRebel

    JRebel 是一款 Java 虚拟机插件,它使得 Java 程序员能在不进行重部署的情况下,即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 678 关注
  • 新人

    让我们欢迎这对新人。哦,不好意思说错了,让我们欢迎这位新人!
    新手上路,请谨慎驾驶!

    52 引用 • 228 回帖
  • RemNote
    2 引用 • 16 回帖 • 9 关注
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架,基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 397 关注
  • 笔记

    好记性不如烂笔头。

    311 引用 • 796 回帖
  • Caddy

    Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。

    12 引用 • 54 回帖 • 168 关注
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成,还支持通过插件进行扩展。

    10 引用 • 5 回帖 • 2 关注
  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    108 引用 • 295 回帖 • 2 关注
  • Laravel

    Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计,是一款崇尚开发效率的全栈框架。

    20 引用 • 23 回帖 • 735 关注
  • API

    应用程序编程接口(Application Programming Interface)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。

    79 引用 • 431 回帖
  • 星云链

    星云链是一个开源公链,业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎,一个公链的所有功能,它基本都有,比如你可以用它来开发部署你的去中心化的 APP,你可以在上面编写智能合约,发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖
  • OpenStack

    OpenStack 是一个云操作系统,通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成,同样也可以通过 Web 接口让最终用户部署资源。

    10 引用
  • 反馈

    Communication channel for makers and users.

    126 引用 • 929 回帖 • 266 关注
  • AngularJS

    AngularJS 诞生于 2009 年,由 Misko Hevery 等人创建,后为 Google 所收购。是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。

    12 引用 • 50 回帖 • 498 关注
  • frp

    frp 是一个可用于内网穿透的高性能的反向代理应用,支持 TCP、UDP、 HTTP 和 HTTPS 协议。

    20 引用 • 7 回帖
  • Firefox

    Mozilla Firefox 中文俗称“火狐”(正式缩写为 Fx 或 fx,非正式缩写为 FF),是一个开源的网页浏览器,使用 Gecko 排版引擎,支持多种操作系统,如 Windows、OSX 及 Linux 等。

    7 引用 • 30 回帖 • 398 关注
  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务,可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 93 关注
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    180 引用 • 821 回帖
  • 国际化

    i18n(其来源是英文单词 internationalization 的首末字符 i 和 n,18 为中间的字符数)是“国际化”的简称。对程序来说,国际化是指在不修改代码的情况下,能根据不同语言及地区显示相应的界面。

    8 引用 • 26 回帖
  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:SymSoloVditor思源笔记

    1063 引用 • 3455 回帖 • 166 关注