React项目中利用iframe嵌入传递登录态的“吐个槽”SDK

作者: 星星的成长之路 | 来源:发表于2019-04-18 17:12 被阅读0次

React项目中利用iframe嵌入传递登录态的“吐个槽”SDK
react项目中利用标签嵌入 VUE项目</a></li><li><a href="#r3">利用postMessage解决webview中iframe数据交</a></li><li><a href="#r4">react 中嵌入iframe 高度自适应</a></li><li><a href="#r5">学习react的第三天(2)</a></li><li><a href="#r6">iframe页面相互调用方法</a></li><li><a href="#r7">有关iframe的吐槽</a></li><li><a href="#r8">一、在页面嵌入多级iframe，页面回退问题</a></li><li><a href="#r9">常见的HTML标签详解（iframe、a、form、input、</a></li><li><a href="#r10">React-Native / iOS 混编入原生项目</a></li></ol></div> <p>最近需要在项目中的某个页面嵌入“吐个槽”，项目用的是react全家桶。<br> 要求是携带登录状态信息，因此用组件的形式嵌入，过程中遇到了一些坑，在此记录一下。</p> <h5>吐个槽接入文档（官方出品）：</h5> <p><a href="https://links.jianshu.com/go?to=https%3A%2F%2Ftucao.qq.com%2Fhelper%2FconfigLogonState" target="_blank" rel="nofollow">https://tucao.qq.com/helper/configLogonState</a></p> <h4>重点</h4> <ul> <li>利用form表单传递登录信息，必须保证在提交前form表单拿到正确的登录信息</li> <li>iframe必须有name值，form必须有target，且二者保持一致，否则form表单的默认跳转属性会打开新页面或者替换掉当前页面</li> </ul> <h5>问题一：</h5> <p>最初直接使用了官方提供的工具包tucao.js，看了一下源码，就自己实现了一下。没想到问题就来了，form表单提交会在iframe页面里打开一个链接，同时也会新开一个标签页打开链接。试了很多种方法，都没能解决，最后改用iframe中嵌入form，再传入登录信息的方式才解决；</p> <h5>问题二：</h5> <p>form表单提交放到了componentDidMount函数中，有时拿不到更新后的state，因此用了一个定时器，保证能够拿到最新的登录信息</p> <h4>全部代码：</h4> <pre><code>import React, { Component } from 'react' import { connect } from 'react-redux' import { withRouter } from 'react-router-dom' import actions from '@/action' import './index.less' // 请填写自己公司的产品ID const productId = 1212 class Feedback extends Component { constructor(props) { super(props) this.state = { isLoading: false, // 避免重复获取数据 // 吐个槽提供的默认登录信息，三个字段都必填 nickname: 'tucao_test', avatar: 'https://tucao.qq.com/static/desktop/img/products/def-product-logo.png', openid: '-1', } } componentDidMount() { this.props.loadUserInfo() // 等待setState数据成功后，再进行form表单提交，避免登录信息提交失败 setTimeout(() => { this.complainForm.submit() }, 0) } // 获取登录信息 componentWillReceiveProps(nextProps) { if (nextProps.staff && nextProps.staff.id && !this.state.isLoading) { const { name, avatar, id } = nextProps.staff this.setState({ isLoading: true, nickname: name, avatar: avatar, openid: id, }) } } render() { const { userInfo: { data: { staff }}} = this.props return (<div className="it-complain"> { staff.id && <iframe className="complain-iframe" src={'https://support.qq.com/product/' + productId} // src为指定嵌入的吐个槽页面 name="complain-iframe" // 必须有，为form表单提供target > <form method="post" action={'https://support.qq.com/product/' + productId} target="complain-iframe" // target值为iframe标签的name属性，避免action跳转到其他页面 ref={(form) => { this.complainForm = form }} > <input type="hidden" name="openid" value={this.state.openid} /> <input type="hidden" name="nickname" value={this.state.nickname} /> <input type="hidden" name="avatar" value={this.state.avatar} /> <button type="submit" /> </form> </iframe> } </div>) } } const mapStateToProps = (state) => ({ userInfo: state.userInfo, }) const mapDispatchToProps = { loadUserInfo: actions.loadUserInfo, } export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Feedback)) </code></pre> <p>如果有更好的实现方法，欢迎讨论~</p> </div><div class="relateds"><h2>相关文章</h2><ul><li id="r1"><a href="/user/wmlujttx.html"><img src="https://img.haomeiwen.com/us4820992/9165dbb8-9df8-467a-af97-773c0e0a2d05.jpeg" width="80"></a><h3><a href="/subject/ohitgqtx.html">React项目中利用iframe嵌入传递登录态的“吐个槽”SDK</a></h3><p>最近需要在项目中的某个页面嵌入“吐个槽”，项目用的是react全家桶。要求是携带登录状态信息，因此用组件的形式嵌入...</p></li><li id="r2"><a href="/user/hovibxtx.html"><img src="https://img.haomeiwen.com/is20452983/20a65f27ae092d49.png" width="80"></a><h3><a href="/subject/jqvxyktx.html">react项目中利用<iframe>标签嵌入 VUE项目</a></h3><p>目前公司官网用react写的。东西台多还比较繁重。索性利用iframe标签嵌入vue项目 vardata={'co...</p></li><li id="r3"><a href="/user/virgxttx.html"><img src="https://img.haomeiwen.com/is831991/846ca85af7a38998.png" width="80"></a><h3><a href="/subject/qidhvttx.html">利用postMessage解决webview中iframe数据交</a></h3><p>最近在项目中遇到了一个在客户端中的webview中嵌入iframe页面的问题，但是嵌入的iframe无法自己撑开，...</p></li><li id="r4"><h3><a href="/subject/vyvfqftx.html">react 中嵌入iframe 高度自适应</a></h3><p>项目需求在react 嵌入iframe 高度自适用直接上代码</p></li><li id="r5"><a href="/user/oruzqftx.html"><img src="https://img.haomeiwen.com/us25582775/faec8b12-775a-4632-b055-e5f53c11aec1" width="80"></a><h3><a href="/subject/gghoaktx.html">学习react的第三天(2)</a></h3><p>在react||vue移动端项目中定位，需要使用高德定位SDK 1. 登录高德官网创建一个应用 1.1 登录新建应...</p></li><li id="r6"><a href="/user/ohkmzttx.html"><img src="https://img.haomeiwen.com/is11709825/e645b9a1d01fecd1.png" width="80"></a><h3><a href="/subject/pbadpftx.html">iframe页面相互调用方法</a></h3><p>关键词：iframe,跨域,vue最近的项目中嵌入了外部的iframe，想跨域调用自己页面的方法，点击iframe...</p></li><li id="r7"><a href="/user/aokctttx.html"><img src="https://img.haomeiwen.com/ud/12-aeeea4bedf10f2a12c0d50d626951489.jpg" width="80"></a><h3><a href="/subject/cymutttx.html">有关iframe的吐槽</a></h3><p>起源任务本来是交给新来的同事做的，但由于新同事上手较慢，而功能却着急上线使用，不得已就得亲自动手了。 Task：将...</p></li><li id="r8"><h3><a href="/subject/szxvuxtx.html">一、在页面嵌入多级iframe，页面回退问题</a></h3><p>在写后台管理页面时，我们经常会嵌入多个同级iframe,或者在iframe中再嵌入一个iframe，但是点击浏览器...</p></li><li id="r9"><a href="/user/uzqqjxtx.html"><img src="https://img.haomeiwen.com/is16506556/5b207f0c736afd48.png" width="80"></a><h3><a href="/subject/dgwjektx.html">常见的HTML标签详解（iframe、a、form、input、</a></h3><p>一、iframe标签（它能够将另一个HTML页面嵌入到当前页面中） iframe目前比较少用，如果公司有几年前的项...</p></li><li id="r10"><h3><a href="/subject/vdsjmftx.html">React-Native / iOS 混编入原生项目</a></h3><p>一脸懵逼：吐槽前言后面慢慢吐槽感谢前人分享经验系列：React-Native 资料 React-Native...</p></li></ul></div></div><div id="comments"><h2>网友评论</h2><ul></ul></div><ul><li><a href="/c/gqvaqttx.html">前端相关</a></li></ul><div class="article_by"><div class="bytitle"><p>本文标题：<font color="#666">React项目中利用iframe嵌入传递登录态的“吐个槽”SDK</font></p><p>本文链接：<font color="#666">https://www.haomeiwen.com/subject/ohitgqtx.html</font></p></div></div></div><div class="meiwen-left fl mb"><div class="title ht"><h3>延伸阅读</h3><div class="share fr" id="bdshare"></div><i class="lt"></i><i class="rt"></i></div><div class="related"><ul class="related-list"><li><a class="meiwen" href="/mw/lbyctttx.html">那年盛夏诗歌</a></li><li><a class="meiwen" href="/sy/kbyctttx.html">环境监察队工作总结范文</a></li><li><a class="meiwen" href="/sy/hbyctttx.html">优秀教师学习心得范文</a></li><li><a class="meiwen" href="/sy/cbyctttx.html">华胥引的读后感300字</a></li><li><a class="meiwen" href="/yw/qbyctttx.html">《Its red》教学反思范文</a></li><li><a class="meiwen" href="/sy/fbyctttx.html">农资购销的合同范本</a></li><li><a class="meiwen" href="/sy/xbyctttx.html">竞选中队委优秀演讲稿</a></li><li><a class="meiwen" href="/yw/tbyctttx.html">辞金蹈海的成语解释</a></li><li><a class="meiwen" href="/ja/zvyctttx.html">《世纪宝鼎》公开课教案设计</a></li></ul></div><div class="picture" ><ul class="picture-list"><li><a class="meiwen" href="/article/69641.html"><img class="lazy" data-original="/uploads/allimg/1611/1-1611292156350-L.jpg" width="150" height="120" alt="因为爱你，所以牵挂"/><span>因为爱你，所以牵挂</span></a></li><li><a class="meiwen" href="/article/84632.html"><img class="lazy" data-original="/uploads/userup/2800/14V4C648-O08.jpg" width="150" height="120" alt="今生今世红尘醉——美到心碎的古诗词"/><span>今生今世红尘醉——美到</span></a></li><li><a class="meiwen" href="/article/53482.html"><img class="lazy" data-original="/uploads/allimg/1609/1-160ZPU1030-L.jpg" width="150" height="120" alt="一个90后的内心独白"/><span>一个90后的内心独白</span></a></li><li><a class="meiwen" href="/article/3639.html"><img class="lazy" data-original="/uploads/userup/1159/1432YGR-9294.jpg" width="150" height="120" alt="致已逝去的高中年华"/><span>致已逝去的高中年华</span></a></li></ul></div></div><div class="meiwen-left fl mb"><div id="pinglun"><div id="SOHUCS"></div></div></div><div class="meiwen-left fl"><div class="title ht"><h3>深度阅读</h3><ul class="list"><li><font color="#A2B088">您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！</font></li></ul><i class="lt"></i><i class="rt"></i></div><ul class="tags"><li><a class="meiwen" href="/huati/qingrenjie/">情人节</a></li><li><a class="meiwen" href="/huati/muqinjie/">母亲节</a></li><li><a class="meiwen" href="/huati/chongyangjie/">重阳节</a></li><li><a class="meiwen" href="/huati/qingmingjie/">清明节</a></li><li><a class="meiwen" href="/huati/duanwujie/">端午节</a></li><li><a class="meiwen" href="/huati/zhishujie/">植树节</a></li><li><a class="meiwen" href="/huati/yuanxiaojie/">元宵节</a></li><li><a class="meiwen" href="/huati/funvjie/">妇女节</a></li><li><a class="meiwen" href="/huati/yurenjie/">愚人节</a></li><li><a class="meiwen" href="/huati/shengdanjie/">圣诞节</a></li><li><a class="meiwen" href="/huati/fuqinjie/">父亲节</a></li><li><a class="meiwen" href="/huati/jiaoshijie/">教师节</a></li><li><a class="meiwen" href="/huati/ertongjie/">儿童节</a></li><li><a class="meiwen" href="/huati/laodongjie/">劳动节</a></li><li><a class="meiwen" href="/huati/qingnianjie/">青年节</a></li><li><a class="meiwen" href="/huati/jianjunjie/">建军节</a></li><li><a class="meiwen" href="/huati/wanshengjie/">万圣节</a></li><li><a class="meiwen" href="/huati/pinganye/">平安夜</a></li><li><a class="meiwen" href="/huati/guanggunjie/">光棍节</a></li><li><a class="meiwen" href="/huati/zhongqiujie/">中秋节</a></li><li><a class="meiwen" href="/huati/guoqingjie/">国庆节</a></li><li><a class="meiwen" href="/huati/ganenjie/">感恩节</a></li><li><a class="meiwen" href="/huati/labajie/">腊八节</a></li><li><a class="meiwen" href="/huati/">更多话题</a></li></ul></div><div class="cl"></div></div><div class="article-right"><div class="meiwen-right fr mb"><dt class="title hd"><h3>栏目导航</h3><i class="lt"></i><i class="rt"></i></dt><ul class="list-nav"><a class="meiwen" href="/c/gqvaqttx.html">前端相关</a><a class="meiwen" href="/c/hqtttttx.html">摄影</a><a class="meiwen" href="/c/vqtttttx.html">故事</a><a class="meiwen" href="/c/uttttttx.html">互联网</a><a class="meiwen" href="/c/cttttttx.html">读书</a><a class="meiwen" href="/c/yttttttx.html">旅行</a></ul></div></div><div class="meiwen-right fr mb"><div class="title hd"><h3>热点阅读</h3><i class="lt"></i><i class="rt"></i></div><ul class="right-list"><li><a class="meiwen" href="/subject/ycitgqtx.html">你才20多岁，日子并没有那么难熬，不堪</a></li><li><a class="meiwen" href="/subject/jcitgqtx.html">遇到困难，如何解决？（一）</a></li><li><a class="meiwen" href="/subject/rcitgqtx.html">彼岸花之猎山守</a></li><li><a class="meiwen" href="/subject/lcitgqtx.html">如果人和人死后还能相见，那么死亡还有什么魅力可言……</a></li><li><a class="meiwen" href="/subject/hcitgqtx.html">总有一段时光，让我们不能遗忘</a></li><li><a class="meiwen" href="/subject/ccitgqtx.html">《肠道藏着心理的秘密》书评｜心理疾病真的与肠道有关吗？</a></li><li><a class="meiwen" href="/subject/xcitgqtx.html">谷歌云如何将IP地址改为固定IP</a></li><li><a class="meiwen" href="/subject/tcitgqtx.html">柳永词——不减唐人高处</a></li><li><a class="meiwen" href="/subject/oqitgqtx.html">两个月我是这样瘦十斤的</a></li><li><a class="meiwen" href="/subject/gqitgqtx.html">英国顶级名校-华威大学 University of Warwic</a></li></ul></div><div class="meiwen-right fr mb"><div class="title hd"><h3><a href="/c/gqvaqttx.html">前端相关</a></h3><i class="lt"></i><i class="rt"></i></div><ul class="right-list"><li><a class="meiwen" href="/subject/yrhekftx.html">js数组的基本操作</a></li><li><a class="meiwen" href="/subject/apkekftx.html">2. js数组操作小结</a></li><li><a class="meiwen" href="/subject/qikekftx.html">3. js数组去重方法</a></li><li><a class="meiwen" href="/subject/qnkekftx.html">4.js三种数组排序方法</a></li><li><a class="meiwen" href="/subject/tnquuqtx.html">css实现悬浮在图片上，图片缓缓变大</a></li><li><a class="meiwen" href="/subject/ohitgqtx.html">React项目中利用iframe嵌入传递登录态的“吐个槽”SDK</a></li><li><a class="meiwen" href="/subject/zpitgqtx.html">函数节流（throttle）和函数防抖（debounce）</a></li><li><a class="meiwen" href="/subject/qvpqnqtx.html">H5页面适配问题小记</a></li><li><a class="meiwen" href="/subject/urmzjctx.html">antd的Upload组件在安卓机上直接打开相册</a></li><li><a class="meiwen" href="/subject/lzklictx.html">JS基础小记</a></li></ul></div></div></div></div><div class="footer"><p class="p_1"><a href="/about/aboutus.html">关于我们</a>|<a href="/about/service.html">服务条款</a>|<a href="/about/contact.html">联系我们</a>|<a href="/subject/ohitgqtx.html">React项目中利用iframe嵌入传递登录态的“吐个槽”SDK</a>|<a href="/about/tougao.html">投稿指南</a>|<a href="/sitemap.html">网站地图</a>|<a href="/rssmap.html">RSS订阅</a>|<a href="/about/paiban.html">排版工具</a>|<a href="javascript:vod(0);" onclick="Mobileurl()">手机版</a></p><p class="p_2">提供<a href="/meiwen/zhaichao/">经典美文摘抄</a>,<a href="/sanwen/">优美散文欣赏</a>,<a href="/shige/xiandai/">现代诗歌精选</a>,<a href="/xiaoshuo/">短篇小说</a>,<a href="/diary/suibi/">心情随笔</a>,<a href="/qingshu/">表白情书</a><a href="/fanwen/">范文</a>,<a href="/gushi/">故事会在线阅读</a>欣赏</p><p class="p_2">Copyright © 2014-2023 <a href="/">Haomeiwen.com</a> All Rights Reserved. <a href="/">好美文阅读网</a> 版权所有</p><p class="p_2">备案信息：<i></i>桂公网安备 45052102000051号 · 桂ICP备13007215号-3</p><div class="footer_service"><p class="p_2">本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯</p><p class="p_2">所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！</p></div></div><script src="https://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript" src="https://apps.bdimg.com/libs/jquery-lazyload/1.9.5/jquery.lazyload.min.js"></script><script type="text/javascript">$("img.lazy").lazyload({effect : "fadeIn"});</script><script type="text/javascript" src="/img/jquery.meiwen.min.js"></script></body></html>