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

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

javascript wordpress

Javascript 在WordPress站点中实现外部小部件,javascript,wordpress,Javascript,Wordpress,我一直试图在WordPress网站上为walk score和great schools添加生成的小部件代码，但运气不太好。我安装了插件脚本n Styles，并希望如果我分割代码并将JavaScript放在页面插件的位置，它将呈现小部件，但没有这样的运气。它似乎几乎呈现了GreatSchools小部件，但地图仍然无法加载 <script type='text/javascript'> var ws_wsid = 'ga431dbc8ecbb4bc8a2c1f3599ba30081';

我一直试图在WordPress网站上为walk score和great schools添加生成的小部件代码，但运气不太好。我安装了插件脚本n Styles，并希望如果我分割代码并将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 -->


变量ws_wsid='ga431dbc8ecbb4bc8a2c1f3599ba30081'；
VAR WSL地址=’1060伦巴底街，旧金山，CA；
var ws_format='高'；
变量ws_宽度='400'；
变量w_高度='500'；
#ws-walkscore平铺{位置：相对；文本对齐：左}#ws-walkscore平铺*{float:none；}
div#GS#u schoolSearchWidget{边框：实心4px#999999；边框底宽：20px；背景色：FFF；宽度：742px；位置：相对；字体系列：Arial，Arial，无衬线；}div.GS#widget_内边框{边框：实心1px#000000；}div.GS#widget#页脚{高度：40px；填充：0 5px 0 15px；}div.gs35px#{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装饰：下划线；}div div#GS#GS#schoolSearchWidget div seo小部件div{颜色：#666；字体大小：10px；}div.GS#getWidget{位置：绝对；底部：-17px；右：8px；}div#GS#school searchwidget div.GS#getWidget a，div#GS#school searchwidget div.GS#getWidget a:悬停{颜色：#0066B8；字体大小：11px；}函数GS#u updateSEOLinks（cityName，stateName，var abbr）{getCityLink=document（'GS_city_SEO'）；var stateLink=document.getElementById（'GS_state_SEO'）；var cityUrl=GS_replaceAll（cityName，“%27”，“”）；cityUrl=GS_replaceAll（cityUrl，“+”，“”）；cityLink.href=”http://www.greatschools.org/city/“+cityUrl+”/“+stateAbbr；stateLink.href="http://www.greatschools.org/modperl/go/“+stateAbbr；if（cityName==”纽约“&&stateAbbr==”纽约“）{cityLink.innerHTML=cityName+”城市学校；stateLink.innerHTML=stateName+”州立学校“；}否则if（cityName==”华盛顿“&&stateAbbr==”DC”）{cityLink.innerHTML=cityName+”，DC学校；stateLink.innerHTML=“”；}else{cityLink.innerHTML=cityName+“schools”；stateLink.innerHTML=stateName+“schools”}函数GS_replaceAll（strSource、strMatch、strReplace）{var rval=strSource；var index=rval.indexOf（strMatch）；而（index！=-1）{rval=rval.replace（strMatch、strReplace）；index=rval.indexOf（strMatch）}返回rval；}pageTracking.pageName=“SchoolFinder小部件外部”pageTracking.hierarchy=“小部件，SchoolFinder，6409421.20161224131721.294344”；pageTracking.server=“www.greatschools.org”；pageTracking.send（）；

如果您能提供一些关于如何在wordpress页面中添加外部javascript小部件的反馈，我将不胜感激

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

您遇到的问题是谷歌新（ish）CORS策略的一部分。您可以尝试一个简单的解决方法，从脚本src链接中删除

http:

，例如

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

在您的特定情况下，这可以放在functions.php文件中，也可以放在自定义插件中（这将使您能够在不破坏功能的情况下更改主题）

值得注意的是，Chrome最近对这一点特别挑剔，并在没有真正有效的方法禁用它的情况下提出了这一改变，这实际上让很多人感到愤怒，这影响了路由器等设备中的许多集成页面，在这些设备中，他们使用的是传统的管理模板，无法使用有效地更改它们以符合Chrome的新标准。

您遇到的问题是Google新（ish）CORS策略的一部分。您可以尝试一个简单的解决方法，从脚本src链接中删除http:，例如

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

在您的特定情况下，这可以放在functions.php文件中，也可以放在自定义插件中（这将使您能够在不破坏功能的情况下更改主题）

值得注意的是，Chrome最近对这一点特别挑剔，并在没有真正有效的方法禁用它的情况下提出了这一改变，这实际上让很多人感到愤怒，这影响了路由器等设备中的许多集成页面，在这些设备中，他们使用的是传统的管理模板，无法使用有效地改变它们以符合Chrome的新标准

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