iframe 访问vue

js和vue方法的相互调用（iframe父子页面的方法相互调用）。

项目是前后端不分离的,模板引擎使用的JSP. 但是使用了Vue+ElementUI,这里列举一些常用的调用方式,有时候可能. 在js里调用vue方法我们需要把方法注册到vue对象之外的页面,所以对与在methods中定义的方法,需要在mounted中注册给window.之后我们可以在js里直接调用, 在vue里调用js方法直接使用window.方法名就可以调用在主页面中调用iframe子页面的代码:  <script type="text/

iframe嵌套vue页面打开新窗口

iframe嵌套vue页面时目录结构为下图: 此时出口文件指向index.html, 所以只需要用a标签动态拼接href, 并设置属性 target="_blank" ,即可在iframe打开新窗口

内网穿透访问Vue项目的时候出现Invalid Host header解决办法

适用场景: 在本地的Vue-cli3项目, 需要其他人浏览. 如果没有外网的服务器, 可以把自己的电脑当做服务器. 这时候需要外网的人能访问到自己的电脑. Mac内网穿透工具:natapp Invalid Host header 当启动了natapp以后, 就这个用natapp提供的域名, 来访问本地的127.0.0.0:8080(端口自己设置), 如果Vue项目启动, 外网就可以通过域名来访问Vue项目. 但是如果出现 Invalid Host header, 需要设置一下 // vue.co

contentWindow 和contentDocument区别及iframe访问

a>contentWindow 兼容各个浏览器,可取得子窗口的 window 对象. b>contentDocument Firefox 支持,> ie8 的ie支持.可取得子窗口的 document 对象. 兼容获取document对象: var getIFrameDoc = function(){ var iobj = document.createElement("iframe"); document.getElementsByTagName("bod

vue学习(五) 访问vue内部元素或者方法

//html <div id="app"> <input type="button" value="ok" v-bind:title="msg" v-on:click="show"></div> <h1>{{msg}}</h1> //script <script> var vm = new Vue({ el:'app', data:{

iframe访问子页面方法

在Iframe中调用子页面的Js函数调用IFRAME子页面的JS函数说明:假设有2个页面,index.html和inner.html.其中index.html中有一个iframe,这个iframe的src指向inner.html. 我们现在要做的就是: 1.在index.html中调用inner.html上的一个js方法 2.在inner.html中调用index.html上的一个js方法实现代码如下: index.html <html> <head> <script

解决新版的vue-cli后无法通过ip访问vue项目

今天遇到个问题,之前一直没遇到过,通过vue-cli脚手架搭建的项目,只能通过localhost访问,不能通过IP地址访问. 这是由 webpack 导致的,2017年11月12日的时候 webpack 升级,导致 /config/index.js 里面的配置项多了几项其中一项就是 dev 中多了: 这样做能禁止局域网内的其他设备访问你的项目,如果想让其他设备通过IP访问你的项目,可以把'localhost'改为'0.0.0.0', 或者在package.json中的 "dev":

natapp 穿透访问 vue项目 Invalid Host header

由于要近期开发微信小程序,所以今天了解了一下这个netapp 内网映射这个东西,所以一开始自己就在网上看,然后想把环境部署起来,参考https://natapp.cn/ ,看了一分钟教程以后,然后自己也部署好了环境,但是本地服务跑的起来,但是 ,不能通过服务器的域名来访问,直接是显示 Invalid Host header 通过服务器域名访问时是显示Invalid Host header,这是由于新版的webpack-dev-server出于安全考虑,默认检查hostname,如果hostnam

在同一个局域网下实时访问vue项目，移动端也可以。

之前,UI看做好的页面效果,一直都是把项目打包好后放上服务器跑. 现在,UI能实时看到我的项目的页面效果情况了. 那么问题来了!!! 要怎样做到呢??? 接下来照做就行了!!! 请您先打开项目下的package.json文件找到dev这一行加上-- host 192.168.1.1 (你的本机地址) "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --ho

C#】通过遍历IFrame访问页面元素

最近在做一个小项目,期间需要用到C#去操作IE页面中的元素,实现自动填写表单并且提交的功能,想这网上关于这方面的东西肯定很多,于是开始在网上找资料. 在逆心的博客上找到些东西对自己帮助很大,原文链接:http://www.cnblogs.com/kissdodog/p/3725774.html 1.首先添加必须的两个控件的引用 Microsoft Internet ControlsMicrosoft HTML Object Library 2.遍历所有的IE窗口 SHDocVw.ShellWin

vue中嵌套的iframe中控制路由的跳转及传参

在iframe引入的页面中,通过事件触发的方式进行传递参数,其中data是一个标识符的作用,在main.js中通过data进行判断,params是要传递的参数 //iframe向vue传递跳转路由的参数 $('#serverIPanalysis').click(function(){ window.parent.postMessage({ data:"haveparams",params:'aaaaaa' },'*'); }) 在vue项目的main.js中,在页面加载的时候会触发一次

记录一次vue 访问空白的排错

访问vue项目页面空白场景内网访问访问url很快就可以打开页面,外网访问一片浏览器端一片空白排查思路 [x] 由于不熟悉vue 先看了nginx的配置,以为是nginx的配置导致的 [x] 百度查询了vue 反向代理空白关键字看了一些感觉场景不对 [x] F12查看资源的加载,也是看到了很多资源收到被加载了,但是浏览器还是不显示首页资源,这个就纳闷了,不明白,不理解为什么明明浏览器已经加载到资源了,但是不去解析显示呢' [x] 随便点进去有一个,在timebe 显示为一串英文大概意思是,

如何让别人访问我的电脑的vue项目

步骤: 1.关闭防火墙. 2.修改build/webpack.dev.conf.js中的"const HOST = process.env.HOST"为"const HOST = process.env.HOST || '0.0.0.0'" 3.修改request.js中的baseURL: 'http://localhost:8008/api'为baseURL: 'http://本机ip:8008/api' 这样自己的电脑和局域网中其他的电脑都可以通过http://

javascript跨域通信（一）：利用location.hash实现跨域iframe自适应

页面域关系: a.html所属域A:www.A.comb.html所属域B:www.B.com 问题本质: js对跨域iframe访问问题,因为要控制a.html中iframe的高度和宽度就必须首先读取得到b.html的大小,A.B不属于同一个域,浏览器为了安全性考虑,使js跨域访问受限,读取不到b.html的高度和宽度. 解决方案: 引入代理代理页面c.html与a.html所属相同域A,c.html是A域下提供好的中间代理页面,假设c.html的地址:www.A.com/c.html ,它负

use vue vuex vue-router, not use webpack

vue,vuex,vue-router放在一起能做什么?不用webpack之类的打包工具使用他们是否可行?各位道友在初学vue时是否有这样的困惑.因为现代构建前端项目的一般模式是: 安装webapck,某种是glup,grunt,或者是fis等构建工具然后安装一个包管理器,npm,bower,或者说是新一代:yarn 再然后用包管理器安装各种各样的包,如:vue,bootstrap,vuex等. 其后用es6的import或者是node的require引入包最后通过构建工具打包或发布

关于vue 框架与后台框架的混合使用的尝试

这几天我在研究前台框架和后台框架融合的问题,进行了一些尝试; 我前台选择的是 vue,当然也可以选择 react 等其他 mvvm 框架,不过 vue 对于我来说是最熟悉的; 后台话,我选择的是 php 的 lumen 框架,他是laravel 的简化版,因为比较轻量,所以这也是我的选择; 先说下我这边的环境: 系统:Mac os 10.12; 服务器:apache 2.2; php:7.0; lumen:5.4; vue:2.0以上; 这是 lumen 的官网 https://lumen.la

关于vue 框架与后台框架的混合使用的尝试------转载

这几天我在研究前台框架和后台框架融合的问题,进行了一些尝试; 我前台选择的是 vue,当然也可以选择 react 等其他 mvvm 框架,不过 vue 对于我来说是最熟悉的; 后台话,我选择的是 php 的 lumen 框架,他是laravel 的简化版,因为比较轻量,所以这也是我的选择; 先说下我这边的环境: 系统:Mac os 10.12; 服务器:apache 2.2; php:7.0; lumen:5.4; vue:2.0以上; 这是 lumen 的官网 https://lumen.la

Vue.js 学习笔记第2章数据绑定和第一个Vue应用

本篇目录: 2.1 Vue实例与数据绑定 2.2 指令与事件 2.3 语法糖学习任何一种框架,从一个Hello World应用开始是最快了解该框架特性的途径. 我们先从一段简单的HTML代码开始,感受Vue.js最核心的功能: <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport"

redis数据库-VUE创建项目

redis数据库 ''' 关系型数据库: mysql, oracle 非关系型数据库(nosql): redis,mongodb (没有表的概念) key-value mongodb: json 数据--存储在硬盘上 redis: 存在内存中 --- 速度最快用途: --做缓存 --session数据 --游戏排行榜 --对速度要求高的数据的存储 -- 消息队列 ''' redis VS Memcached -- redis 支持五大数据类型 : 字符串| 列表| 字典 | 集合| 有序集合

<iframe> 标签中 src 的三种形式. display , echart

1.形式一: <iframe scrolling="yes" src="action.php?c=HLogin&a=linkPage&p=fx" width="100%" height="100%" frameborder="0"></iframe> ---------- 访问的方法: //关联页面管理: public function linkPageAction(

Vue stage2

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://vue

iframe 访问vue

热门专题