iframe框架内嵌vue项目：Blocked a frame with origin "http://xxxx" from accessing a cross-origin iframe.解决办法

场景：

网站iframe内嵌vue项目

原因：

iframe框架跟内嵌网页跨域

例如

网站域名：http://test.com       iframe内嵌域名http://casey.test2.com则会出现上边报错

解决方法

vue项目app.vue文件

你可能感兴趣的:(iframe,vuejs)

• vue 表格左右拖拽调整列宽_vue中实现拖动调整左右两侧div的宽度的示例代码 weixin_40008969 vue表格左右拖拽调整列宽
  写在最前最近在使用vue的时候，遇到一个需求，实现左右div可通过中间部分拖拽调整宽度，类似于这样这是我最终的实现效果还是老话，因为我不是专业的前端工程师，只是兼职写一些简单的前端，所以这个功能的实现得益于以下博客，《vue拖动调整左右两侧div的宽度》、《vuejs中拖动改变元素宽度实现宽度自适应大小》，而我只是针对于他们提供的代码，加了亿点点自己所需要的细节。实现原理如上图所示，我们需要将要实
• H5新增标签和属性 yx_back HtmlH5新增属性H5新增标签
  H5新增标签和属性H5新增标签1、结构标签2、媒体标签3、表单标签4、其他功能标签H5新增属性1、对于js进行添加的属性。2、网页中标签中加入小图标的样式代码3、iframe新增属性4、其他属性H5全局属性可直接在标签里插入的：data-自定义属性名字；H5新增标签1、结构标签header：某个区块的头部信息/标题；section：独立内容区块，可以用h1~h6组成大纲，表示文档结构，也可以有章节
• vue.config.js 配置 你不讲 wood javascriptvue.js前端webpack开发语言前端框架
  vue.config.js文件是VueCLI项目中的全局配置文件，它允许你以JavaScript的形式来配置构建选项，而不是通过命令行参数或者.vue-clirc的JSON格式。官方文档:https://cli.vuejs.org/zh/config/#全局-cli-配置基础配置publicPath设置构建好的文件被部署后的公共路径。module.exports={publicPath:proce
• iframe 双向实时通信 徐同保 javascript前端vue.js
  父：handleAdd()">按钮{{count}}import{onMounted,ref}from"vue";constcount=ref(0);consthandleAdd=()=>{count.value++;letiframe:any=document.getElementById('m-iframe')letmessage={target:'iframe',data:'Hello,Ia
• 【前端UI框架】VUE ElementUI 离线文档 可不联网打开 我是Superman丶 前端组件前端vue.jselementui
  【前端UI框架】VUEElementUI离线文档可不联网打开Element-Theworld'smostpopularVueUIframeworkElement-Theworld'smostpopularVueUIframework离线文档下载地址https://download.csdn.net/download/G971005287W/89742895文档制作第一步:克隆源代码Gitee地址:
• Vue中使用pdfJs预览PDF、图片 viceen vue3+ts-运维vue项目-运维vue.jshtmlhtml5
  Vue中使用pdfJs预览PDF、图片pdf.js是一个使用HTML5构建的可移植文档格式库。它可以帮助我们在浏览器中构建pdf文档，实现在线查看pdf文件的功能。实现步骤如下：1.下载pdfJs到本地（官网下载地址），放到项目根目录下的静态资源目录static文件夹内，将文件命名为pdfJs。如下图使用iframe打开或者需要注意的是：file参数中默认只允许传简单路径比如：http://www
• 在线预览PDF和图片 oyxm____ pdfvue.jsjavascript
  项目中遇到一个需要在线预览pdf以及图片功能，在网上找了很多插件发现都达不到理想需求，所有自己通过iframe标签自己封装了一个内嵌pdf页面通过判断当前文件流的后缀名来区分是pdf还是图片或者是其他类文档组件如下，需要的自取直接可用-->-->下载图片关闭import{online}from'@/api/system/user.js'exportdefault{props:{pdfDialog:
• Vue-devtools安装 zhouhao_180
  方法一：1、下载安装包到本地https://github.com/vuejs/vue-devtools2、打开下载好的文件夹，按住shift+鼠标右键,选择在此处打开Powershell窗口3、执行命令npminstall4、执行命令npmrunbuild这一步一定不要忘了，没有执行这一步的话，项目文件夹shells>chrome文件夹里会少一个src文件夹,这里会报错：无法加载背景脚本"buil
• 回顾vue开发spa（踩坑记录） Just do it
  使用vueJS开发前端页面差不多也有大半多年了。由于项目后台管理页面最早都是使用JQ进行开发的，刚开始使用vue的时候，只能是直接在页面里面引入vueJS框架进行开发，期间把项目后台的编辑页面和其他复杂页面全部改用vueJS的了（没有用到组件，只是增强了一下交互，开发更简单便捷）。由于工期和个人习惯问题，期间也留下了很多坑和隐患，比如不少页面是JQ和vue混用，导致后来改功能的时候痛不欲生……所以
• Vue初步认识与Vue基础指令 amanohina
  Vue.js简介先来谈谈传统网页开发传统开发的缺点：1.DOM操作频繁，代码繁杂2.DOM操作与逻辑代码混合，可维护性差3.不同功能区域书写在一起，可维护性低4.模块之间的依赖关系复杂Vue.js应运而生官网：https://cn.vuejs.orgVue.js核心特性数据驱动视图数据变化会自动更新到对应元素中，无需手动操作DOM，这种行为称作单向数据绑定。单向数据绑定对于输入框等可输入元素，可设
• vue前端实现打印功能 是小芳芳呀 前端前端javascripthtmlvue.js
  方案一：window.print()这个命令默认打印整个页面的内容，所以，如果想要实现局部打印功能的话，就要重新给body赋值，并且后续执行完之后再还原回去，这样的话会造成一些非预期的结果，很麻烦，并且在当前也操作，window.document.body的内容重新渲染，打印完会有刷新，影响用户的体验，所以不推荐方案二：利用iframe，iframe.contentDocument.execCom
• html如何嵌套页面？