Vue界面使用iframe嵌套html界面的传值问题

 

一.从父页面给子页面传值

可以通过url进行传值,若嵌入外网例如www.baidu.com,可以设置为

<iframe name = "child" id = "child" :src="www.baidu.com#asd=1" width="1920" height="880" frameborder="0" scrolling="no" style="position:related;top: 2.8px;left: 0px;"></iframe>

asd后面跟的值可以根据需要更改,不影响地址的访问

若为本地html文件,类似的可以写作

:src="test.html#asd =1"

但是如何在子页面读取asd的值这个还没探究成功,稍后若寻找到合适的方法会再更新。这种方法比较适合比较简单的需求

二.父页面获取子页面的值

例如我们在子页面设置四个click事件,JS代码如下

<script>
        var n = 0;
        function FN()
        {
            n = 1;
            alert('hello1'+n);
        }
        function EN()
        {
            n = 2;
            alert('hello1'+n);
        }
        function ER()
        {
            n = 3;
            alert('hello1'+n);
        }
        function GN()
        {
            n = 4;
            alert('hello1'+n);
        }
</script>

那么在父页面我们可以在method中定义如下函数获取到n的值

callchild(){
      let obj1=window.frames["child"];//获得对应iframe的window对象
      alert(obj1.n);
    },

将callchild函数由某个button触发,可以看到弹出窗口

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值