微信jssdk在iframe頁(yè)面失效問(wèn)題的解決措施
項(xiàng)目需求
微信端添加拍品的頁(yè)面有照片上傳功能，上傳時(shí)打開(kāi)一個(gè)iframe，該頁(yè)面用canvas加載用微信jssdk的選擇圖片接口選擇的圖片（這里微信會(huì)返回一個(gè)形如weixin://xxxx的localid，可直接放在img的src里進(jìn)行預(yù)覽），可進(jìn)行放大縮小移動(dòng)旋轉(zhuǎn)等操作，點(diǎn)擊確定按鈕將編輯好的圖片發(fā)送到服務(wù)器存成圖片
遇到的問(wèn)題
當(dāng)子頁(yè)面功能開(kāi)發(fā)完成后，在主頁(yè)面通過(guò)iframe打開(kāi)子頁(yè)面，無(wú)法調(diào)用微信jssdk接口中的選擇圖片接口，其他jssdk中的接口也無(wú)法正常工作。但是單獨(dú)打開(kāi)子頁(yè)面可以正常工作，主頁(yè)面的微信分享等也是正常的。
解決思路
首先是以為主頁(yè)面和子頁(yè)面同時(shí)注入了jssdk的簽名信息，是否有可能沖突。經(jīng)過(guò)測(cè)試，排除此種可能。通過(guò)網(wǎng)絡(luò)搜索，有網(wǎng)友在此貼中描述的問(wèn)題與我相似，但沒(méi)有解決方法 http://www.weixin.com/thread-8022-1-1.html
通過(guò)測(cè)試可以在主頁(yè)面進(jìn)行簽名驗(yàn)證，子頁(yè)面不添加jssdk的簽名信息。需要調(diào)用jssdk接口時(shí)，比如圖片選擇接口，在jssdk的函數(shù)前加parent.，即調(diào)用父頁(yè)面的此函數(shù)，經(jīng)過(guò)測(cè)試，功能可正常調(diào)用。
parent.wx.chooseImage({
success: function (res) {
//upload_success(res.localIds);
}
值得一提的是，微信jssdk看似功能強(qiáng)大，但是bug不少，真正在項(xiàng)目中使用，經(jīng)不起推敲。雖然解決的此問(wèn)題，新的問(wèn)題又來(lái)了，canvas導(dǎo)出圖片不能跨域。。。最終還是沒(méi)有用微信的接口來(lái)實(shí)現(xiàn)需求。
以上所述是小編給大家介紹的微信jssdk在iframe頁(yè)面失效問(wèn)題的解決措施，希望對(duì)大家有所幫助！
相關(guān)文章
JS實(shí)現(xiàn)延遲隱藏功能的方法(類(lèi)似QQ頭像鼠標(biāo)放上展示信息)
下面小編就為大家分享一篇JS實(shí)現(xiàn)延遲隱藏功能的方法(類(lèi)似QQ頭像鼠標(biāo)放上展示信息)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
chrome下判斷點(diǎn)擊input上標(biāo)簽還是其余標(biāo)簽的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇chrome下判斷點(diǎn)擊input上標(biāo)簽還是其余標(biāo)簽的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
這篇文章主要為大家介紹了JS前端首屏優(yōu)化技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了angularjs模態(tài)框的使用代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
javascript實(shí)現(xiàn)漢字轉(zhuǎn)拼音代碼分享
這篇文章主要介紹了javascript實(shí)現(xiàn)漢字轉(zhuǎn)拼音代碼分享，非常的實(shí)用，從項(xiàng)目中分離出來(lái)的，這里分享給大家，有需要的小伙伴可以參考下。2015-04-04
javascript實(shí)現(xiàn)簡(jiǎn)單的Map示例介紹
本文為大家介紹下使用javascript實(shí)現(xiàn)簡(jiǎn)單的Map，可以對(duì)map進(jìn)行獲取、判斷、刪除、增加等等，感興趣的朋友可以了解下2013-12-12
基于js與flash實(shí)現(xiàn)的網(wǎng)站flv視頻播放插件代碼
這篇文章主要介紹了基于js與flash實(shí)現(xiàn)的網(wǎng)站flv視頻播放插件代碼,該功能在很多網(wǎng)站上都有著廣泛的應(yīng)用,本文以實(shí)例形式對(duì)其進(jìn)行介紹,需要的朋友可以參考下2014-10-10
本文主要介紹了js仿微博動(dòng)態(tài)欄功能的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
js實(shí)現(xiàn)每日自動(dòng)換一張圖片的方法
這篇文章主要介紹了js實(shí)現(xiàn)每日自動(dòng)換一張圖片的方法,涉及javascript操作圖片與日期的相關(guān)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-05-05
有個(gè)網(wǎng)友問(wèn)了個(gè)問(wèn)題，如下的html，為什么點(diǎn)擊所有的段落p輸出都是5，而不是alert出對(duì)應(yīng)的0，1，2，3，4。2011-03-03