Flask template中使用iframe

Flaks template中使用iframe嵌套新的网页(new_page.html)的网页到历史网页(old_page.html)中(减少新网页的入口)

1,增加iframe tag

在old_page.html中适当位置增加iframe入口标签:

复制代码
<iframe src="{{url_for('upgrade.get_new_page')}}" style="width:100%;height:100%;min-height: 500px;outline: 1px; border: 0 solid #dddddd"></iframe>

注意:在flask template中 iframe默认是进行跳转的,非静态资源的加载,直接写文件路径一般是找不到的。需要经过flask路径的跳转。

为了避免出现意想不到的路径访问(项目是老而大的项目,路径跳转目前还未弄清楚),自己写了个view来渲染要插入的页面

2,通过view跳转来渲染目标页面

upgrade 蓝图中定义get_new_page,view代码逻辑如下

new_page.html是在templates/my_page/下

复制代码
def get_new_page():

        return render_template("my_page/new_page.html")

最初是想通过在iframe的src中写入目标页面路径地址"my_page/new_page.html"来进行页面加载,发现会请求http://localhost:8443/mm/upgrade/my_page/new_page.html的地址内容来填充iframe,因为这个地址内容404,导致填充的内容是404结果页面。所以猜测,iframe在flask的template中应该是通过路由跳转机制来找页面的。不能简单通过加路径地址来加载目标页面。要跟目标页面的路径跳转结合使用。

相关推荐
辻戋15 分钟前
从零实现React Scheduler调度器
前端·react.js·前端框架
徐同保17 分钟前
使用yarn@4.6.0装包,项目是react+vite搭建的,项目无法启动,报错:
前端·react.js·前端框架
Qrun1 小时前
Windows11安装nvm管理node多版本
前端·vscode·react.js·ajax·npm·html5
中国lanwp1 小时前
全局 npm config 与多环境配置
前端·npm·node.js
JELEE.2 小时前
Django登录注册完整代码(图片、邮箱验证、加密)
前端·javascript·后端·python·django·bootstrap·jquery
TeleostNaCl4 小时前
解决 Chrome 无法访问网页但无痕模式下可以访问该网页 的问题
前端·网络·chrome·windows·经验分享
前端大卫6 小时前
为什么 React 中的 key 不能用索引?
前端
你的人类朋友6 小时前
【Node】手动归还主线程控制权:解决 Node.js 阻塞的一个思路
前端·后端·node.js
小李小李不讲道理8 小时前
「Ant Design 组件库探索」五:Tabs组件
前端·react.js·ant design
毕设十刻8 小时前
基于Vue的学分预警系统98k51(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js