小程序
小游戏
企业微信
微信支付
扫描小程序码分享
使用web components自定义了img组件，开启了shadow dom，然后在微信网页中就无法长按保存图片了，在手机自带浏览器中可以长按保存。
我尝试了把shadow dom关闭，就正常了。微信这里能不能兼容下shadow dom里面的img，让其也能长按保存。
（不知道微信H5的问题在哪里 反馈，只能写在这里了）
2 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
怎么复现?给个case看下
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<p>这是普通img:</p>
<img src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg" />
<br />
<p>这是web components封装的img组件:</p>
<User-card></User-card>
<script>
class UserCard extends HTMLElement {
constructor() {
super()
var shadow = this.attachShadow({ mode: 'open' })
var image = document.createElement('img')
image.src = 'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg'
image.classList.add('image')
shadow.appendChild(image)
}
window.customElements.define('user-card', UserCard)
</script>
</body>
</html>
ios 15.3.1 微信中web components定义的img无法长按保存。Safari浏览器中正常。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <p>这是普通img:</p> <img src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg" /> <br /> <p>这是web components封装的img组件:</p> <User-card></User-card> <script> class UserCard extends HTMLElement { constructor() { super() var shadow = this.attachShadow({ mode: 'open' }) var image = document.createElement('img') image.src = 'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg' image.classList.add('image') shadow.appendChild(image) } } window.customElements.define('user-card', UserCard) </script> </body> </html>
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
怎么复现?给个case看下
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><p>这是普通img:</p><img src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg" /><br /><p>这是web components封装的img组件:</p><User-card></User-card><script>class UserCard extends HTMLElement {constructor() {super()var shadow = this.attachShadow({ mode: 'open' })var image = document.createElement('img')image.src = 'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg'image.classList.add('image')shadow.appendChild(image)}}window.customElements.define('user-card', UserCard)</script></body></html>ios 15.3.1 微信中web components定义的img无法长按保存。Safari浏览器中正常。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <p>这是普通img:</p> <img src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg" /> <br /> <p>这是web components封装的img组件:</p> <User-card></User-card> <script> class UserCard extends HTMLElement { constructor() { super() var shadow = this.attachShadow({ mode: 'open' }) var image = document.createElement('img') image.src = 'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg' image.classList.add('image') shadow.appendChild(image) } } window.customElements.define('user-card', UserCard) </script> </body> </html>