iframe标签使用传递参数

父级给iframe内部传递参数

方法1:很简单,直接在iframe的src数属性中拼接上参数

// 发送方:
<div>
    <iframe :src="url" id="childFrame" importance="high" name="demo" ></iframe>
</div>

url = `http://localhost:8080/couponManager?a={a}` //  

接收方:直接使用window.location.search接收,然后对接收到的进行处理

未完待续…

iframe内部给父级传递参数

方法1:使用postMessage方法跨域传递

// 发送方:
top.postMessage("hello", "http://localhost:8081"); // 要写top.postMessage或者是parent.message

// 接收方:
window.addEventListener( "message",
(e)=>{console.log(e.data)}	
false);

未完待续…

遇到的问题

1、问题:Failed to execute ‘postMessage’ on ‘DOMWindow’
如果遇到上面的问题可以看下这位大佬的解释:Failed to execute ‘postMessage’ on ‘DOMWindow’

上面的方法都是我自己亲自试过的,完全可用,如果小伙伴还有比较好的方法,可以留言给我,万分感谢~~

  • 7
    点赞
  • 33
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
要在iframe中动态传递参数,有几种方法可以实现。首先,可以直接在iframe的src属性中使用字符串拼接的方式传递参数。例如,在发送方的代码中可以使用以下方式定义url参数: url = `http://localhost:8080/couponManager?a={a}` 然后,在接收方中,可以直接使用window.location.search来接收参数,并对接收到的参数进行处理。这种方法比较简单,直接,适用于简单的参数传递。 另一种方法是在传递参数时进行编码和解码。当页面需要动态加载iframe,并且传递中文参数时,可能会出现编码错误。为了解决这个问题,可以使用编码和解码函数来处理参数。编码时使用encodeURI(encodeURI("包含中文的串")),解码时使用java.net.URLDecoder.decode("需要解码的串")。这样可以确保参数能够正确传递和解析。 此外,还可以使用表单与操作页面分离的方式传递参数。通过按钮点击事件触发,传递一个唯一性的参数至子页面JSP,子页面内负责查询和判断逻辑。这种方法可以通过在按钮点击事件中设置参数的方式来实现。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [iframe标签使用传递参数](https://blog.csdn.net/sxm666666/article/details/106761473)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [动态加载iframe时get请求传递中文参数乱码解决方法](https://download.csdn.net/download/weixin_38532139/14824322)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [JSP跨iframe如何传递参数实现代码](https://download.csdn.net/download/weixin_38686860/14826372)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值