javascript - 在 WordPress 网站中实现外部小部件

Question

我一直在尝试在 WordPress 网站中添加生成的步行分数和优秀学校的小部件代码，但运气不佳。我安装了插件 Script n Styles，并希望如果我拆分代码并将 JavaScript 放在页面的插件位置，它将呈现小部件，但没有这样的运气。它似乎几乎渲染了 GreatSchools 小部件，但 map 仍然无法加载。

<script type='text/javascript'>
var ws_wsid = 'ga431dbc8ecbb4bc8a2c1f3599ba30081';
var ws_address = '1060 Lombard Street, San Francisco, CA';
var ws_format = 'tall';
var ws_width = '400';
var ws_height = '500';
</script><style type='text/css'>#ws-walkscore-tile{position:relative;text-align:left}#ws-walkscore-tile *{float:none;}</style><div id='ws-walkscore-tile'></div><script type='text/javascript' src='http://www.walkscore.com/tile/show-walkscore-tile.php'></script>

<!-- School Finder Widget starts here --> <style type="text/css"> div#GS_schoolSearchWidget { border: solid 4px #999999; border-bottom-width: 20px; background-color: #FFF; width: 742px; position: relative; font-family: Arial, Arial, sans-serif; }  div.GS_widget_innerBorder { border: solid 1px #000000; }  div.GS_widget_footer { height: 40px; padding: 0 5px 0 15px; }  div.GS_widget_footer img { margin-top: 8px; float: left; border: 0 }  div.GS_seo { float: right; text-align: right; width: 120px; margin-top: 3px; font-size: 13px; line-height: 17px; }  div#GS_schoolSearchWidget a, div#GS_schoolSearchWidget a:hover { text-decoration: underline; }  div#GS_schoolSearchWidget div.GS_seo a, div#GS_schoolSearchWidget div.GS_seo a:hover { color: #666; font-size: 10px; }  div.GS_getWidget { position: absolute; bottom: -17px; right: 8px; }  div#GS_schoolSearchWidget div.GS_getWidget a, div#GS_schoolSearchWidget div.GS_getWidget a:hover { color: #0066B8; font-size: 11px; } </style> <script type="text/javascript"> function GS_updateSEOLinks(cityName, stateName, stateAbbr) { var cityLink = document.getElementById('GS_city_SEO'); var stateLink = document.getElementById('GS_state_SEO');  var cityUrl = GS_replaceAll(cityName, "%27", "'"); cityUrl = GS_replaceAll(cityUrl, " ", "_"); cityUrl = GS_replaceAll(cityUrl, "+", "_"); cityLink.href = "http://www.greatschools.org/city/" + cityUrl + "/" + stateAbbr; stateLink.href = "http://www.greatschools.org/modperl/go/" + stateAbbr; if (cityName == "New York" && stateAbbr == "NY") { cityLink.innerHTML = cityName  + " City schools"; stateLink.innerHTML = stateName + " State schools"; } else if (cityName == "Washington" && stateAbbr == "DC") { cityLink.innerHTML = cityName  + ", DC schools"; stateLink.innerHTML = ""; } else { cityLink.innerHTML = cityName  + " schools"; stateLink.innerHTML = stateName + " schools"; } }  function GS_replaceAll(strSource, strMatch, strReplace) { var rval = strSource; var index = rval.indexOf(strMatch); while (index != -1) { rval = rval.replace(strMatch, strReplace); index = rval.indexOf(strMatch); } return rval; } </script> <script type="text/javascript" src="http://www.greatschools.org/res/js/s_code.js"></script> <script type="text/javascript" src="http://www.greatschools.org/res/js/externalTracking.js"></script> <div id="GS_schoolSearchWidget"> <div class="GS_widget_innerBorder"> <div id="widget"> <iframe class="greatschools" src="http://www.greatschools.org/widget/schoolSearch.page?searchQuery=94536&amp;textColor=0066B8&amp;bordersColor=000000&amp;lat=37.564144&amp;lon=-122.00418&amp;cityName=Fremont&amp;state=CA&amp;normalizedAddress=Fremont%2C+CA+94536&amp;width=740&amp;height=368&amp;zoom=13" width="100%" height="100%" marginheight="0" marginwidth="0" frameborder="0" scrolling="no"></iframe> </div> <div class="GS_widget_footer"> <a href="http://www.greatschools.org/" target="_blank"><img src="http://www.greatschools.org/res/img/widget/poweredby_logo.gif" alt="Powered by GreatSchools"/></a> <div class="GS_seo"> <div class="GS_city"><a href="http://www.greatschools.org/california/fremont/" target="_blank" rel="follow follow" id="GS_city_SEO">Fremont schools</a></div> <div class="GS_state"><a href="http://www.greatschools.org/california/" target="_blank" rel="follow follow" id="GS_state_SEO">California schools</a></div> </div> </div> </div> <div class="GS_getWidget"> <a href="http://www.greatschools.org/schoolfinder/widget/customize.page">I want this widget for my site</a> </div> </div> <script type="text/javascript"> pageTracking.pageName = "SchoolFinder Widget External"; pageTracking.hierarchy = "Widgets,SchoolFinder,6409421.20161224131721.294344"; pageTracking.server = "www.greatschools.org"; pageTracking.send(); </script> <!-- School Finder Widget ends here -->

我非常感谢一些有关如何在 WordPress 页面中添加外部 javascript 小部件的反馈。预先感谢您。

更新:小部件似乎确实显示了，但在 Chrome 浏览器中查看页面时，它被作为未经身份验证的脚本阻止，因此您必须允许该脚本运行。是否需要在 WordPress 环境中添加任何内容，以免将其作为可能的不安全脚本触发，并在加载页面时自动运行该脚本？

Answer 1

您遇到的问题是 Google 新的 CORS 政策的一部分。您可以尝试通过从脚本 src 链接中删除 http: 来解决此问题，例如

<script type="text/javascript" src="http://www.greatschools.org/res/js/externalTracking.js"></script>

而是

<script type="text/javascript" src="//www.greatschools.org/res/js/externalTracking.js"></script>

如果提供脚本的站点具有 ssl 证书，则会告诉浏览器使用与页面相同的身份验证 (https) 来请求该证书。如果远程服务器没有 ssl，您可能会遇到同样的问题。

<小时/>

另一个问题是 CORS 本身(跨源请求策略)。

为了启用场外脚本，您需要传递允许它们的 header 。这可以在 php 中完成，如下所示:

header("Access-Control-Allow-Origin: *");

在您的具体情况下，可以将其放置在您的functions.php文件中，或者放置在自定义插件中(这将使您能够在不破坏功能的情况下更改主题)。我建议亲自在自定义插件中进行此操作。

<小时/>

应该指出的是，Chrome 最近对此变得非常挑剔，并且实际上让很多人感到愤怒，因为它提出了这一更改，但没有真正有效的方法来禁用它，这影响了相当多的集成路由器等设备中的页面使用旧版管理模板，无法有效更改它们以符合 Chrome 的新标准。