如何正确地将Java脚本添加到这个PHP‘找不到的页面’页面?

时间:2016-07-20 作者:Stavros

我试图向我的“未找到的页面”PHP页面添加一些Javascript,但无论我尝试了多少种不同的方法,它都会破坏一些东西。

以下是此代码的示例页面:http://www.miamirealestateguy.com/miami-property-for-sale-details/9401-COLLINS-AVE-807-SURFSIDE-FL-33154/A10077417/39/

我当前的页面正在使用下面的代码,在浏览器中一切看起来都是正确的,但页面上的脚本打断了我在页面顶部的导航,因此下拉菜单不起作用。当我删除脚本时,导航再次工作。

enter image description here

<?php
/**
 * @package Serene
 * @since Serene 1.0
 */
?>

<h1>
  <?php esc_html_e( \'No Results Found\', \'Serene\' ); ?>
</h1>
<?php if ( is_home() && current_user_can( \'publish_posts\' ) ) : ?>
<p><?php printf( __( \'Ready to publish your first post? <a href="%1$s">Get started here</a>.\', \'Serene\' ), esc_url( admin_url( \'post-new.php\' ) ) ); ?></p>
<?php elseif ( is_search() ) : ?>
<p>
  <?php _e( \'Sorry, but nothing matched your search terms. Please try again with some different keywords.\', \'Serene\' ); ?>
</p>
<?php get_search_form(); ?>
<?php else : ?>
<p>
  <?php _e( \'<p><strong>If you arrived on this page by clicking a link to a real estate listing in a search engine, the property has now been sold or is no longer available.</strong></p><br /><p><strong>You can start a new search for currently available real estate listings below.</strong></p>\', \'Serene\' ); ?>
<br /><h2><strong>Search by Criteria:</strong></h2><div class="grey-box"><script type=\'text/javascript\' src=\'http://www.idxhome.com/site/listing/search/widget/91928?style=horizontal\'></script></div><br /><h2><strong>Search by Street Address:</strong></h2><div class="grey-box"><script type=\'text/javascript\' src=\'http://www.idxhome.com/site/listing/searchByAddress/widget/91928\'></script></div><br /><h2><strong>Search by MLS ID:</strong></h2><div class="grey-box"><script type=\'text/javascript\' src=\'http://www.idxhome.com/site/listing/searchByListingId/widget/91928\'></script></div><br /><h2><strong>Search by Map:</strong></h2><div class="grey-box"><script type=\'text/javascript\' src=\'http://www.idxhome.com/site/map/search/widget/91928\'></script></div>
</p>
<?php endif; ?>
我尝试将脚本移动到此标记中页面上文本的基本HTML所在的位置,但这样做会破坏整个页面,并且没有任何效果:

<?php _e( \'<p><strong>If you arrived on this page by clicking a link to a real estate listing in a search engine, the property has now been sold or is no longer available.</strong></p><br /><p><strong>You can start a new search for currently available real estate listings below.</strong></p>\', \'Serene\' ); ?>
有人能帮助我以正确的方式将脚本实现到这个页面中,这样就不会破坏我的顶部导航吗?我已经尝试了所有我能想到的方法,通过反复尝试,但我还是弄不明白,我一点也不懂PHP!

非常感谢。

1 个回复
SO网友:bosco

问题不在于如何使用这些脚本或将其放置在何处,而在于这些脚本的作者是如何编写的。

控制导航菜单功能的长版本“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.jQuerywindow.$ 变量,包括擦除$.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>