问题
I can't figure out how to add the target="_blank" attribute to the 5 star rating badge.
This is what I've inserted into webpage...coming from yelp. I added the last line to the script to try and add attribute but it wont accept. I can, however get it to accept on the div before as well as the img after just not on the anchor tag.
<div class="localsocialyelpreviews"><div id="yelp-biz-badge-fsc-N6ciVLIYpasN2FWN3Nxy9Q">Gina's Pizza & Pastaria</div><script type="text/javascript">
!function(doc, id){
var js;
var scriptElement = doc.getElementsByTagName("script")[0];
if (!doc.getElementById(id)) {
js = doc.createElement("script");
js.id = id;
js.src = "//dyn.yelpcdn.com/biz_badge_js/fsc/N6ciVLIYpasN2FWN3Nxy9Q.js";
scriptElement.parentNode.insertBefore(js, scriptElement);
}
} (document, "yelp-biz-badge-script-fsc-N6ciVLIYpasN2FWN3Nxy9Q");
$("div#yelp-biz-badge-fsc-N6ciVLIYpasN2FWN3Nxy9Q > a").attr("target","_blank");</script></div>
This is what ends up happening. NO TARGET ATTRIBUTE :/
<div class="localsocialyelpreviews">
<div id="yelp-biz-badge-fsc-N6ciVLIYpasN2FWN3Nxy9Q"><a href="http://www.yelp.com/biz/ginas-pizza-and-pastaria-corona-del-mar"><img width="125" height="55" src="http://dyn.yelpcdn.com/extimg/fsc/N6ciVLIYpasN2FWN3Nxy9Q.png" alt="Gina's Pizza & Pastaria"></a></div>
<p><script type="text/javascript">
!function(doc, id){
var js;
var scriptElement = doc.getElementsByTagName("script")[0];
if (!doc.getElementById(id)) {
js = doc.createElement("script");
js.id = id;
js.src = "//dyn.yelpcdn.com/biz_badge_js/fsc/N6ciVLIYpasN2FWN3Nxy9Q.js";
scriptElement.parentNode.insertBefore(js, scriptElement);
}
} (document, "yelp-biz-badge-script-fsc-N6ciVLIYpasN2FWN3Nxy9Q");
$("div#yelp-biz-badge-fsc-N6ciVLIYpasN2FWN3Nxy9Q > a").attr("target","_blank");</script></p></div>
I appreciate any insight.. I've tried this many different ways and searched for the solution to this in yelp and stackoverflow but cannot find the answer. Thanks
回答1:
Modify the script provided by yelp to set the target='_blank' attribute once the script has loaded. Add this (be sure to insert YOUR YELP CODE):
g.onload = function() {
document.querySelector('#yelp-biz-badge-YOUR-YELP-CODE a').setAttribute('target', '_blank');
}
See below:
<div id="yelp-biz-badge-YOUR-YELP-CODE">
<a href="http://yelp.com/biz/YOUR-YELP-URL?utm_medium=badge_star_rating_reviews&utm_source=biz_review_badge" target="_blank">
Check out my biz on Yelp
</a>
</div>
<script>(function(d, t) {
var g = d.createElement(t);
var s = d.getElementsByTagName(t)[0];
g.id = "yelp-biz-badge-YOUR-YELP-CODE";
g.src = "//yelp.com/biz_badge_js/en_US/YOUR-YELP-CODE.js";
s.parentNode.insertBefore(g, s);
g.onload = function() {
document.querySelector('#yelp-biz-badge-YOUR-YELP-CODE a').setAttribute('target', '_blank');
}
}(document, 'script'));
</script>
回答2:
I don't know if you still need an answer to this, but I had the same question and was able to figure it out.
I'm not a JavaScript expert, but from what I can tell, the default Yelp! snippet re-orders all your scripts so that its remote script is at the very end of the queue; so, even though your line is after the Yelp code, I think your "attr" modification line is still getting queued before the remote Yelp script runs that actually creates the anchor (<a\>
) object you're trying to modify.
I was able to clean up the snippet for my own site, and just place the "attr" modification into my site's "onReady" functions. I can't imagine this would affect the behavior of the Yelp! script in any way; it's doing exactly what Yelp's snippet does, except it's not queuing it at the end of the JavaScript execution pipeline.
<div id="yelp-link">
<div id="yelp-biz-badge-script-plain-BlWbNrrOL4HJqwYcmr6SUw"></div>
<script type="text/javascript" id="yelp-biz-badge-script-plain-BlWbNrrOL4HJqwYcmr6SUw" src="//dyn.yelpcdn.com/biz_badge_js/plain/BlWbNrrOL4HJqwYcmr6SUw.js">
</script>
</div><!-- #yelp-link -->
... and later on in my functions.js file:
$(document).ready(function() {
$("#yelp-link a").attr("target","_blank");
});
I hope this makes sense, and helps :-)
回答3:
I was looking for an answer months ago and gave up - my js skills are not quite at that level yet. But the same issue came up again, and the answer just came to me in a flash - cover the badge with my own transparent link. I put the yelp script in a div, and just added my own link immediately after the script. Here's the html that goes after the script:
<a href="http://www.yelp.com/biz/yourpage" target="_blank" class="yelp-button">My Yelp Page</a>
and the css:
.yelp-button { background: transparent;
display: block;
height: 56px;
width: 125px;
position: absolute;
top: 0;
text-indent: -9999px;
}
回答4:
I found a direct way to fix the javascript, so this actually works.
(1): Look at the code provided by yelp for your Yelp business badge/button. Copy the link to the *.js javascript file that's referenced in the script, and save a local copy in your root directory. You're going to modify it.
(2): For the *.js file modifications... In the innerHTML line of the javascript, add the following piece of code after the href link:
\u003ca target=\"_blank\"
The \u003ca which precedes the target=\"_blank\" tells the javascript to put target="_blank" inside of the yelp button's hyperlink/anchor tag. Anything written after the \u003e\u003cimg text will appear in the yelp button's image tag.
So, an example copy of the modified yelp-javascript-file.js should be like this:
var badge_element = document.getElementById("yelp-badge");
badge_element.innerHTML = "\u003ca href=\"http://www.yelp.com\" \u003ca target=\"_blank\" \u003e\u003cimg alt=\"Yelp\" src=\"http://dyn.yelpcdn.com/extimg/genericYelpBizButton.png\" height=\"33\" width=\"88\"\u003e\u003c/a\u003e";
(3): Now, in the code provided by Yelp... make sure it is pointing to your modified javascript file, and not the original javascript file. For a simple button pointing to Yelp, the code will look like this:
<div id="yelp-badge" title="Yelp Business Page">
<a href="http://yelp.com">Check out Yelp</a></div>
<script type="text/javascript">(function(d, t) {var g = d.createElement(t);var s = d.getElementsByTagName(t)[0];g.id = "yelp-badge-script";g.src = "yelp-javascript-file.js";s.parentNode.insertBefore(g, s);}(document, 'script'));</script>
(Final Result): Below is a copy of the html loaded after the script runs and your button appears. and YES... it opens in a new window / new tab.
<div id="yelp-badge" title="Yelp Business Page">
<a href="http://www.yelp.com" target="_blank">
<img alt="Yelp" src="http://dyn.yelpcdn.com/extimg/genericYelpBizButton.png" height="33" width="88">
</a>
</div>
来源:https://stackoverflow.com/questions/17070305/yelp-5-star-reviews-badge-to-open-in-new-window