WeixinJSBridge查看预览图片iframe无效，公众号预览图片无效解决

事由

微信公众号打开页面嵌套iframe后无法预览图片

解决

在声明iframe标签的页面加入

一、引入js插件

<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

二、写实现方式

/**
 * 微信预览图片
 */
function weixinLookImg(url){
	if (window.WeixinJSBridge) {
		if(url != ""){
			// url必须绝对路径，相对路径无效
			WeixinJSBridge.invoke('imagePreview', {'current':url, 'urls': [url]});
			return;
		}
	}
}

在iframe跳转的页面里调用

$(".look_img").click(function(){
   //var url = $(this).attr("src");
   var url = "https://img-pre.ivsky.com/img/tupian/pre/202106/25/yundongchang_zuoyi-002.jpg";
   parent.weixinLookImg(url);// 这里是一层父级的时候，如果多层父级就像这样 parent.parent.weixinLookImg(url)
})

其他

如果出现绝对路径查看图片403错误时

在head标签里加入

<!-- 兼容img的绝对路径-->
<meta name="referrer" content="no-referrer" />