2016-12-28 109 views
1

我一直在试图在WordPress站点中添加生成的小部件代码,用于步行评分和优秀学校,并且没有太多运气。我安装了脚本n样式插件,并希望如果我分离代码并将JavaScript放入插件的页面位置,它将呈现小部件,但没有这样的运气。它似乎几乎呈现GreatSchools小部件,但地图不会加载。在WordPress站点中实现外部小部件

<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环境中是否需要添加任何内容,以便将其作为可能不安全的脚本触发,并在加载页面时自动运行脚本?

回答

0

你遇到的问题是谷歌新(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本身(跨源请求策略)。

为了启用非现场脚本,您需要传递允许它们的标头。这可以在PHP做这样:

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

在特定情况下,这可以放在你的functions.php文件,或者交替在自定义插件(这将使你改变你的主题,而不会破坏功能)。我会建议在自定义插件中亲自做。


应当指出的是,Chrome的特别已经得到了关于这个最近极为挑剔,而实际上已经做了很多的人通过地提出这个变化与禁用它没有真正有效的方式,这已经相当影响生气设备中的许多集成页面(如路由器等)使用旧版管理模板,无法有效更改它们以符合Chrome的新标准。