微信jssdk在iframe頁面失效問題的解決方案_javascript技巧

專案需求

微信端新增拍品的頁面有照片上傳功能，上傳時開啟一個iframe，該頁面用canvas載入微信jssdk的選擇圖片介面選擇的圖片（這裡微信會傳回一個形如weixin://xxxx的localid ，可直接放在img的src裡預覽），可進行放大縮小移動旋轉等操作，點選確定按鈕將編輯好的圖片傳送到伺服器存成圖片

遇到的問題

當子頁面功能開發完成後，在主頁面透過iframe開啟子頁面，無法呼叫微信jssdk介面中的選擇圖片接口，其他jssdk中的介面也無法正常運作。但是單獨打開子頁面可以正常工作，主頁面的微信分享等也是正常的。

解決思路

首先是以為主頁面和子頁面同時注入了jssdk的簽名訊息，是否有可能衝突。經過測試，排除此種可能。透過網路搜索，有網友在此貼文中描述的問題與我相似，但沒有解決方法 http://www.weixin.com/thread-8022-1-1.html

透過測試可以在主頁面進行簽名驗證，子頁面不加入jssdk的簽名資訊。需要呼叫jssdk接口時，例如圖片選擇接口，在jssdk的函數前加parent.，即調用父頁面的此函數，經過測試，功能可正常調用。

parent.wx.chooseImage({
success: function (res) {
//upload_success(res.localIds);
}

值得一提的是，微信jssdk看似功能強大，但是bug不少，真正在專案中使用，經不起推敲。雖然解決的這個問題，新的問題又來了，canvas匯出圖片不能跨域。 。 。最終還是沒有用微信的介面來實現需求。

以上所述是小編給大家介紹的微信jssdk在iframe頁面失效問題的解決措施，希望對大家有幫助！