vue 打开一个iframe_vue嵌套iframe一系列问题

router.go()的使用

此情况主要适用于更改iframe中src值以后导致的路由跳转混乱。

详细描述：当多次更改iframe->src属性后，调用router.go(-1)，不能实现路由后退上一级，而是将iframe当作一个窗口文档，调用了该窗口文档的window.history.go(-1)，并未更改父级项目的路由后退功能。

解决办法：

不通过改变iframe->src属性值去访问具体内容，采用window.location.replace(url)更改iframe将访问的内容，具体代码如下：

exportdefault{

name: 'ComponentsName',

data() {

return{

url: ''

}

watch: {

url(val) {

if(val) {

this.$refs.iframe.contentWindow.location.replace(val)

}

复制代码

通信(父页面和子页面相互通信)

两个项目之间相互通信，涉及到跨域问题，子页面不能直接调用父页面的方法，父页面同样不能调用子页面的方法。

错误详情：Error in created hook: "SecurityError: Blocked a frame with origin "http://*" from accessing a cross-origin frame."

解决办法： postMessage

window.postMessage() 方法可以安全地实现跨源通信。该方法被调用时，会在所有页面脚本执行完毕之后向目标窗口派发一个MessageEvent消息。代码如下：

Post Message

Frame Color

vue 打开一个iframe_vue嵌套iframe一系列问题相关推荐

vue 打开一个iframe_Vue 之五 —— 单元测试
单元测试(unit testing):是指对软件中的最小可测试单元进行检查和验证.代码的终极目标有两个,第一个是实现需求,第二个是提高代码质量和可维护性.单元测试是为了提高代码质量和可维护性,是实现代 ...
HTML5怎么编辑另一个页面,html中嵌套iframe页面如何将一个html页面中嵌入另一个html页面...
如何将一个html页面中嵌入另一个html页面将一个html页面中嵌入另一个html页面需要使用到iframe标签. iframe标签用法: scrolling禁止鼠标滑动,frameborder嵌 ...
vue项目点击左侧子菜单，打开一个新的浏览器标签页
在项目开发中,产品给了这样一个需求:点击左侧子菜单,在浏览器中打开一个新的标签页,展示数据大屏.在此写个随笔记录下实现过程. 思路:使用编程式导航实现页面跳转,我们常用的是 $router.push ...
vue实现一个类似浏览器搜索功能(ctrl + f)
目录引言一.介绍自己项目的需求二.先说说我的数据怎么设置的三.具体功能的实现思路: 1.点击左侧目录跳转到对应位置 2.滚动到相应位置左侧目录树的对应标题变蓝色 3.搜索功能 4.目录展开和收 ...
SAP UI5 FileUploader 控件深入介绍 - 为什么需要一个隐藏的 iframe 试读版
一套适合 SAP UI5 初学者循序渐进的学习教程作者简介 Jerry Wang,2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今.Jerry 是 SAP 社区导师,S ...
flask 检测post是否为空_用Flask和Vue制作一个单页应用（五）
使用POST向后台发送数据 Flask app修改可以直接使用现有的路由处理函数来接收前端发来的数据,server/app.py中的all_res()修改如下: @app.route('/resou ...
哇塞，打开一个页面访问了这么多次数据库？？
用SQL Server 事件探查器看了一下,哇塞,每打开一个页面都select了n多次数据库,而且很多都是类似的代码?为啥? (1).二级嵌套绑定数据源 (2).二级联动 (3).--多着呢! 解决方 ...
vue 嵌套表格组件_使用form-create动态生成vue自定义组件和嵌套表单组件
使用form-create动态生成vue自定义组件和嵌套表单组件 maker.create 通过建立一个虚拟 DOM的方式生成自定义组件生成 Maker let rule = [ formCreat ...
二级菜单打开一个时其他关闭_blender2.8教程顶部菜单栏
顶栏菜单程序菜单启动画面打开启动画面 . 支持Blender 开发筹资打开开发基金网站 Blender商店打开Blender商店. 关于发布说明打开最新发布说明. Blender官网 ...
使用vue做一个“淘宝“项目——2
做出首页前言:做出底部导航栏与显示页面目录: 创建项目文件删除原有文件引用资源文件实现底部导航栏显示页面做出首页显示商品栏做出分类一.将导航栏修改颜色首先打开vant 2文档中的 ...

vue 打开一个iframe_vue嵌套iframe一系列问题

vue 打开一个iframe_vue嵌套iframe一系列问题相关推荐

最新文章

热门文章