vue、html与iframe html事件相互调用

一.html文件中引入的iframe标签

1.在父html中调用子iframe html 中的事件

通过contentwindow属性

document.getElementById("myiframe").contentWindow.myfunc()

其中 myiframe 为当前的iframe的id, myfunc为iframe html中的事件

2.在iframe html 中调用父HTML 的方法

parent.func()

二.vue页面中引入的iframe标签

1.在vue组件中调用iframe html 中的事件

self.$refs.iframe.contentWindow.myfunc()

2.在iframe html 中调用vue methods

(1).在vue中设置标识id 并将方法暴露在window中

export default{
    data(){
        return {
            vueid:"myid"
         }
     },

     methods:{
        changeNodeMsg(){
            alert(0)
        }
    },
    created(){
        let self = this
        window[this.vueid] = ()=>{
             self.changeNodeMsg()
        }
    }
    

在iframe html中使用

window.parent["myid"]()

原文地址:https://www.cnblogs.com/wong-do/p/10413867.html

时间: 2024-10-15 20:29:55

vue、html与iframe html事件相互调用的相关文章

iframe父子级相互调用

父级:parent.html 调用孩子方法:fuji.window.functionName(); <!doctype html> <html> <head> <script type="text/javascript"> function say() { alert("parent.html------>I'm at parent.html"); } function callChild() { //docum

Iframe父页面与子页面之间的相互调用

iframe元素就是文档中的文档. window对象: 浏览器会在其打开一个HTML文档时创建一个对应的window对象.但是,如果一个文档定义了一个或者多个框架(即:包含一个或者多个frame或者iframe标签),浏览器就会为原始文档创建一个window对象,再为每个iframe创建额外的window对象,这些额外的window对象是原始窗口的子窗口. contentWindow: 是指指定的iframe或者iframe所在的window对象 Demo1 父页面fu.html: <!DOCT

框架父子页面iframe相互调用方法

如果你采用嵌入iframe机制不可避免的要用到各个iframe页面之间方法和属性的相互调用.这里介绍的是兼容各个浏览器的iframe调用方式. 这里设定有3个页面一个父页面main.html它嵌入了两个iframe分别是childPage1.html和childPage2.html main.html有一个函数叫parentFunc().main.html代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

iframe 父页面与子页面之间的方法的相互调用

如果你采用嵌入iframe机制,不可避免的要用到各个iframe页面之间方法和属性的相互调用.这里介绍的是兼容各个浏览器的iframe调用方式. 这里设定有3个页面,一个父页面main.html,它嵌入了两个iframe,分别是:childPage1.html和childPage2.html main.html有一个函数叫parentFunc().main.html代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN

Layui Iframe页面间 方法的相互调用

就是普通的iframe之间方法的调用,只是注意一下src就像 var childWindow = $(window.parent.document).find("iframe[src='/Admin/CheckImages/Index.aspx']")[0].contentWindow; childWindow.showCheckImage(); 原文地址:https://www.cnblogs.com/guxingy/p/12020476.html

iframe父子兄弟之间调用传值(contentWindow &amp;&amp; parent)

iframe的调用包括以下几个方面:(调用包含html dom,js全局变量,js方法) 主页面调用iframe: iframe页面调用主页面: 主页面的包含的iframe之间相互调用: 主要知识点 1:document.getElementById("ii").contentWindow 得到iframe对象后,就可以通过contentWindow得到iframe包含页面的window对象,然后就可以正常访问页面元素了: 2:$("#ii")[0].content

JS前后台方法的相互调用

一.前台调用后台的方法: 1.在后台编写你要调用到前台的方法,如下://javaScript函数中执行C#代码中的函数public string str() { return "javaScript方法中执行C#代码中的方法"; } 2.前台用JS就可以实现调用后台的方法,如下:<script type="text/javascript"> function Test() { var a = "<%=str()%>"; /

iframe 父子页面方法调用

在写代码的时候经常会用到将一个网页嵌入到另一个网页中,w3c也规定了一个标签<iframe>,这个标签本身就支持跨域,而且所有的浏览器都支持 iframe具有以下属性: 1.frameborder 设为1代表显示周围边框,设置为0不显示周围边框 2.height 设置iframe的高度 3.width 设置iframe的宽度 4.longdesc 属性值为URL 规定一个页面,该页面包含了有关 iframe 的较长描述 5.marginheight 定义 iframe 的顶部和底部的边距 6.

Android组件间的相互调用

我们研究两个问题,1.Service如何通过Broadcaster更改activity的一个TextView.(研究这个问题,考虑到Service从服务器端获得消息之后,将msg返回给activity) 2.Activity如何通过Binder调用Service的一个方法.(研究这个问题,考虑到与服务器端交互的动作,打包至Service,Activity只呈现界面,调用Service的方法) 结构图见如下:效果图如下:点击“start service”按钮,启动Service,然后更改Activ