自定义 Javascript 在 Safari 中不起作用？答案

【问题标题】：Custom Javascript doesn't work in Safari?自定义 Javascript 在 Safari 中不起作用？
【发布时间】：2016-06-18 02:50:09
【问题描述】：

我在一个 woocommerce 网站上工作，我购买了 2 个插件，以便能够在我的产品页面中自定义项目。插件demo可以在here找到：

在这个演示中有 2 个插件，一个叫做 Multistep Product Configurator (MSPC)，它是页面顶部的选项卡，另一个叫做 Fancy Product Designer (FPD)，它是它下面的产品显示面板。

我想使用这两个插件将它们彼此相邻显示，以避免向下滚动页面以查看使用 MSPC 插件所做的更改。

所以我一直在尝试自定义 css 代码几个小时，但没有成功。你可以看我的页面here：我最终在主题的自定义 js 部分中使用了自定义 javascript 代码，它基本上在页面加载几秒钟后重新定位包装器。

我的问题是，使用 js 代码，我在除 safari 之外的所有浏览器中都实现了我想要的！

这是我使用的代码：

document.onreadystatechange = function(){
 if(document.readyState === 'complete'){
     setTimeout(function () {
         var x = document.getElementsByClassName("mspc-wrapper");
         x[0].style.float = "none";
     }, 3000);
 }

}

知道为什么它在 Safari 浏览器中不起作用吗？随意尝试用 CSS 解决这个问题，但我很确定它不起作用...... 非常感谢任何反馈。

【问题讨论】：

x[0].style.float = "none"; ?
@RayonDabre 我相信 'float' 这个词在 Javascript 中是保留的，这就是我们必须使用其他语法的原因。上面的代码似乎可以在 Chrome、Firefox、Edge、IE 11 中运行，虽然我还没有在 Safari 中尝试过。
HTMLElement.style 只不过是一个对象。float 可以是并且是该对象的属性。
@JamieHutber 经过快速搜索后我发现了这个 --> w3schools.com/jsref/prop_style_cssfloat.asp 所以，它似乎合乎逻辑，为什么不呢？
@RayonDabre @JamieHutber，我的立场是正确的，只使用style.float 是正确的方法。不过，正如他所说，不在 Safari 中工作，这很奇怪！

标签： javascript css wordpress safari woocommerce

【解决方案1】：

在我看来，您更改样式的代码是错误的：

 x[0].style.styleFloat //returns undefined

你会想要使用

x[0].style.float = 'none';

如果这不起作用，请确保 js 甚至正在运行 :)

【讨论】：

问题必须出在 cssFloat || styleFloat 我按照您的建议进行了更改，但仍然没有运气。

【解决方案2】：

Safari 似乎不支持“完成”状态。尝试改用“已加载”（如果文档已完全加载或刚刚加载无关紧要），因为它似乎受到所有浏览器的支持。
Reference

只是为了确保，尝试调试它或抛出一个 console.log 以查看 if 语句是否返回 true。

【讨论】：

【解决方案3】：

好吧，伙计们，

非常感谢您抽出宝贵时间对此作出回应。我要做的是在 content-single-product.php 中添加一个钩子，然后我可以用 CSS 代码修复它。

我最后不需要添加javascript。

感谢您的回复！

【讨论】：