[英]Yelp 5 star reviews badge to open in new window
我不知道如何将target =“ _ blank”属性添加到5星评级徽章。
这是我插入网页的内容……来自yelp。 我在脚本中添加了最后一行以尝试添加属性,但它不会接受。 但是,我可以使它在div之前的div以及img之后的img上都可以接受,而不仅仅是在anchor标签上。
<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>
这就是最终发生的事情。 没有目标属性:/
<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>
我很感谢任何见识。.我尝试了许多不同的方法,并在yelp和stackoverflow中搜索了解决方案,但找不到答案。 谢谢
修改yelp提供的脚本,以在加载脚本后设置target ='_ blank'属性。 添加此内容(请确保输入您的“青年代码”):
g.onload = function() {
document.querySelector('#yelp-biz-badge-YOUR-YELP-CODE a').setAttribute('target', '_blank');
}
见下文:
<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>
我不知道您是否仍然需要答案,但是我有同样的问题,并且能够解决。
我不是JavaScript专家,但据我所知,默认的Yelp! 片段对所有脚本进行重新排序,以便其远程脚本位于队列的尽头; 因此,即使您的代码行位于Yelp代码之后,我认为您的“ attr”修改行仍在排队, 直到运行实际创建要修改的锚对象( <a\\>
\\>)的远程Yelp脚本之前 。
我能够清理自己网站的代码段,然后将“ attr”修改内容放入我网站的“ onReady”功能中。 我无法想象这会影响Yelp的行为! 以任何方式编写脚本; 它的功能与Yelp的代码段完全相同,只是它没有在JavaScript执行管道的末尾排队。
<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 -->
...然后在我的functions.js文件中:
$(document).ready(function() {
$("#yelp-link a").attr("target","_blank");
});
我希望这是有道理的,对您有所帮助:-)
我几个月前一直在寻找答案,但放弃了-我的js技能还没有达到这个水平。 但是,同样的问题再次出现,答案很快就传给我-用我自己的透明链接覆盖徽章。 我将yelp脚本放在div中,并在脚本之后立即添加了自己的链接。 这是脚本之后的html:
<a href="http://www.yelp.com/biz/yourpage" target="_blank" class="yelp-button">My Yelp Page</a>
和CSS:
.yelp-button { background: transparent;
display: block;
height: 56px;
width: 125px;
position: absolute;
top: 0;
text-indent: -9999px;
}
我找到了一种修复JavaScript的直接方法,因此这实际上可行。
(1):查看yelp为您的Yelp业务徽章/按钮提供的代码。 将链接复制到脚本中引用的* .js javascript文件,然后将本地副本保存在根目录中。 您将要对其进行修改。
(2):对于* .js文件修改...在javascript的innerHTML行中,在href链接之后添加以下代码:
\u003ca target=\"_blank\"
因此,修改后的yelp-javascript-file.js的示例副本应如下所示:
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):现在,在Yelp提供的代码中...确保它指向的是修改后的javascript文件,而不是原始的javascript文件。 对于指向Yelp的简单按钮,代码如下所示:
<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>
(最终结果):以下是脚本运行并显示按钮后加载的html的副本。 是,它将在新窗口/新选项卡中打开。
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.