相关文章推荐
飞翔的鼠标垫  ·  iframe内部跳转让父级页面跳转_ifra ...·  1 月前    · 
温暖的洋葱  ·  iframe点击穿透 - CSDN文库·  1 月前    · 
幸福的水煮肉  ·  获取父窗口iframe的ztree对象 - ...·  1 月前    · 
骑白马的红茶  ·  iframe上的事件"load“成功触发，但 ...·  1 月前    · 
重感情的蛋挞  ·  页面底部的iframe:避免自动滚动页面 - ·  1 月前    · 
冷静的葫芦  ·  递归遍历树形结构，查找目标元素 - ...·  7 月前    · 
力能扛鼎的酱肘子  ·  如何在mongodb中级联删除文档？-腾讯云 ...·  11 月前    · 
有爱心的书签  ·  单细胞个性化分析之转录因子篇-腾讯云开发者社 ...·  1 年前    · 
眉毛粗的滑板  ·  takesscreenshot - Do ...·  1 年前    · 
愤怒的警车  ·  LXC容器内的docker服务:无法应用RC ...·  1 年前    · 
Code  ›  React项目中使用iframe，IE11同源地址内容不加载
typescript javascript react iframe
https://juejin.cn/post/6844904050769543175
lichail
3 年前
React项目中使用iframe，IE11同源地址内容不加载

遇到的问题

因满足需求，打开新页签需要用iframe嵌入同源地址下另一个网站的内容，切换页签更换token获取不同客户信息。

功能开发完成后在chrome、firefox、edge等浏览器下都能正常显示。通过IE11打开iframe空白。开发人员工具查看iframe的body为空。 

<iframe id="iframe" class="customer" src="http://localhost:8081/#/root/customer/" height="600" scrolling="auto" name="iframe">
      <head></head>
      <body></body>
    </html>
</iframe>
复制代码

分析问题

从dom结构来看，IE没有加载该URL的内容。 src的地址存在问题，就尝试更换不同地址看能否显示，尝试的结论： 

http://localhost:8081/#/..... （不显示）
./#/root/customer/（不显示）
http://localhost:8081/#/root/customer/?time=1579255141031 (不显示)
document.getElementById('iframe').src=`http://localhost:8081/#/...`(不显示)
将src网址更改为其他任何网站（显示）
创建html静态页面，src指向该静态页面 （显示）
复制代码

解决方案

从尝试不同src过程来看，同源地址下的动态页面打开时IE并未加载它，IE一直是个坑，最近微软发布新的浏览器"Microsoft Edge",感觉好用不少，什么时候客户不再使用IE6~11的浏览器啊。

既然HTML静态页面可以打开，如果在静态页面跳转到指定页面会不会显示，实验结果是正常显示，问题终于解决了。

html静态页面 

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript">
    document.location = "//"+ location.host + '/#/root/customer/'
    </script>
</head>
</body>
</html>
复制代码
文章分类
前端
文章标签
JavaScript
相关推荐
TypeScript的30个小问答
关于作者
前端全能选手
获得点赞 3
文章被阅读 1,321
下载掘金客户端
一个帮助开发者成长的社区
相关文章
百万PV商城实践系列 - 前端图片资源优化实战
221
34
Vue3 源码解毒 & PK React17
56
21
七月的盛夏🥤, 一同赴好文之约｜可视化分析掘金最精彩的作品✨
21
10
各流派 React 状态管理对比和原理实现
18
3
一个月，从LV2到LV4，这个毕业刚一年的菜鸟经历了啥？
16
16
 
推荐文章
飞翔的鼠标垫  ·  iframe内部跳转让父级页面跳转_iframe跳转直接让主界面跳转
1 月前
温暖的洋葱  ·  iframe点击穿透 - CSDN文库
1 月前
幸福的水煮肉  ·  获取父窗口iframe的ztree对象 - xiaostudy
1 月前
骑白马的红茶  ·  iframe上的事件"load“成功触发，但iframe无法作为目标 -
1 月前
重感情的蛋挞  ·  页面底部的iframe:避免自动滚动页面 -
1 月前
冷静的葫芦  ·  递归遍历树形结构，查找目标元素 - shellon - 博客园
7 月前
力能扛鼎的酱肘子  ·  如何在mongodb中级联删除文档？-腾讯云开发者社区-腾讯云
11 月前
有爱心的书签  ·  单细胞个性化分析之转录因子篇-腾讯云开发者社区-腾讯云
1 年前
眉毛粗的滑板  ·  takesscreenshot - Do partial code cache collection in taking screen shot of screen in android - Stac
1 年前
愤怒的警车  ·  LXC容器内的docker服务:无法应用RC_ULIMIT设置-腾讯云开发者社区-腾讯云
1 年前
今天看啥   ·   Py中国   ·   codingpro   ·   藏经阁   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
Code - 代码工具平台
© 2024 ~ 沪ICP备11025650号