在 iOS 中使用 JavaScript 在 PWA 中显示服务器生成的图像

Posted 2023-03-14

【中文标题】在 iOS 中使用 JavaScript 在 PWA 中显示服务器生成的图像

【英文标题】：display server generated image in PWA using JavaScript in iOS

【发布时间】：2019-08-19 06:54:43

【问题描述】：

PWA 中面临的问题。 我正在尝试使用 html、javascript 在 ios 的 WKWebview 中显示图像。

示例： 我在 xCode 项目中添加了以下文件并使用 WKWebview 进行配置。

在 .html 中

<img id="myimage" onclick="changeImage()" src="http://res.cloudinary.com/klipfolio/image/upload/v1500283193/pic_bulboff_to4zaq.png"  >
    <p>Click the lightbulb to turn on/off the light</p>

在 .js 文件中 (JavaScript)

window.changeImage = function() 
    element=document.getElementById('myimage');
    if (element.src.match("bulbon")) 
        element.src="http://res.cloudinary.com/klipfolio/image/upload/v1500283193/pic_bulboff_to4zaq.png";
    
    else  element.src="http://res.cloudinary.com/klipfolio/image/upload/v1500283189/pic_bulbon_tvpcg5.png";
    

但是，不在 Webview 中显示图像。只显示白框..

提前致谢！

【问题讨论】：

我怀疑您的 info.plist 中不允许使用 HTTP。您可能想尝试使用 HTTPS，因为 cloudinary.com 具有有效的 https 证书

尝试使用以下网址加载 WKWebView jsfiddle.net/Lz9go1q0/1

@SahilManchanda 谢谢 Sahil。使用 https 后，它在 WKWebview 中也不起作用

我很高兴这对你有用。

@SahilManchanda 我无法在点击事件中更新图片

【参考方案1】：

该问题与 HTTP 资源有关。默认情况下禁用 HTTP。有两种方法可以使它工作。

A) 通过启用 HTTP（不鼓励）

B) 使用有效的 SSL

由于图像资源已经具有有效的 SSL 证书，因此从 HTTP 更改为 HTTPS 即可。