问题不在于如何使用这些脚本或将其放置在何处,而在于这些脚本的作者是如何编写的。
控制导航菜单功能的长版本“superfish”脚本引发错误,因为$.browser
未定义。虽然$.browser
WordPress在三年多前就被弃用了,默认情况下加载了“jQuery迁移插件”,这可以通过为弃用的代码提供功能来缓解问题,除非jQuery迁移和Superfish之间加载的49个脚本中有一个写得太多$.browser
出于某种原因:现在我们进入问题的实质。
答案中描述的“小部件脚本”在页面上的68个脚本和库之上加载了更多的脚本和库,包括您的站点已经加载的jQuery和jQuery UI组件的不同版本。您的站点本身加载jQuery v1。12.4当“小部件脚本”加载v1时。9.1。使用浏览器的JavaScript控制台,可以在页面加载结束时通过执行jQuery.fn.jquery
或$.fn.jquery
- 在您的网站上生成1.9.1
.
这揭示了一个问题——“idxhome”中的“小部件脚本”没有正确封装,也没有以兼容模式加载jQuery。结果是他们完全覆盖了window.jQuery
和window.$
变量,包括擦除$.browser
变量-从而导致superfish错误并中断导航。另一个巨大的副作用是,很难确定页面上的哪些代码是用哪个版本的jQuery执行的,而jQuery很有可能产生各种奇怪的bug,特别是因为idx小部件注入的版本比您网站加载的版本早了近4年。
通常,您可以使用jQueryjQuery.noConflict()
用于恢复jQuery
和$
全局变量在其他东西攻击它们之前就已经存在(在本例中,是由小部件脚本加载的另一个jQuery库)——然而,由于每个idx小部件都加载了自己的jQuery库,因此在加载两个或多个小部件后,即使这些变量的“备份副本”也指向错误的jQuery代码。
关于您发布的代码,值得一提的是,通常没有很好的理由放置与文本无关的HTML(除了像<span>
, <strong>
, 和<em>
) WordPress内部的翻译功能,如_e()
, 因为无论使用何种活动语言,标记都应该保持不变,这是最常见的。
如果您无意学习WordPress和web开发,您可以考虑聘请一名开发人员来优化您的网站(组合脚本和样式表,删除不必要和多余的脚本和样式表,在有益的地方执行版本更新等)。这是一个很好看的网站-但它可能需要一些技术上的爱!
在任何情况下,最有价值的解决方案之一可能是就这个问题联系IDX脚本的作者-我觉得他们应该更新脚本,以便对加载到的环境更加友好(例如,改进封装和使用noConflict()
必要时)。即使他们不这样做,如果这个问题经常出现,他们也可以提供解决方案。
否则,我将研究的一个解决方案是自己实现小部件(理想情况下,检查远程文件中的JavaScript和HTML,并创建WordPress短代码以打印更兼容的版本),而不是加载那些“小部件脚本”,这样您就可以控制加载哪些库以及加载方式。
我相信是黑客all of the easy solutions are "hacks" that add duct-tape on top of duct-tape, and ideally should be avoided on a production site. 其中:
手动模拟jQuery.noConflict()
通过在idx小部件脚本之前保存全局jQuery变量,然后恢复它们。但是,如果异步加载idx脚本插入的jQuery库,则有可能恢复得太早,idx jQuery库仍可能覆盖站点实例:
Before:
<script type="text/javascript">
window._wpse232741_jQuery = window.jQuery;
</script>
After:
<script type="text/javascript">
window.jQuery = window.$ = window._wpse232741_jQuery;
</script>
作为
$.browser
3年多前被弃用,看来您的站点使用的是过时的superfish版本。将其更新为不依赖于
$.browser
应该删除错误(尽管竞争jQuery库的问题仍然存在)。
执行jQuery迁移脚本(再次)负责设置jQuery.browser
在小部件脚本之后(不过,同样,竞争的库版本问题仍然存在-如果IDX脚本异步加载jQuery,仍然有可能打破这一点):
After:
<script type="text/javascript" src="/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1"></script>
您应该能够通过应用
jQuery.noConflict()
IDX失败的地方—但是,如果IDX jQuery是异步加载的,那么这可能无法工作。
After Each IDX <script>
Element:
<script type="text/javascript">jQuery.noConflict(true);</script>