Question

我一直试图在WordPress网站上为步行得分和优秀学校添加生成的小部件代码，并且没有多少运气。我安装了插件脚本n样式，并希望如果我拆分代码并将JavaScript放在插件的页面位置，它将呈现小部件，但没有这样的运气。它似乎几乎呈现了GreatSchools小部件，但地图仍然没有加载。

<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

您遇到的问题是Googles新（ish）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本身（Cross Origin Request Policy）。

为了启用场外脚本，您需要传递允许它们的标头。这可以在php中完成：

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

在您的特定情况下，这可以放在您的functions.php文件中，或者放在自定义插件中（这将使您能够在不破坏功能的情况下更改主题）。我建议亲自在自定义插件中进行。

值得注意的是，Chrome最近对此有了极大的挑剔，并且实际上让很多人因为没有真正有效的禁用方法而提出这种改变而感到愤怒，这已经影响了相当多的集成路由器之类的设备中的页面以及使用旧版管理模板的设备，无法有效地更改它们以符合Chrome的新标准。

在WordPress站点中实现外部小部件

1 个答案: