javascript点击更改href并在新窗口中打开 [英] javascript on click change href and open in new window

问题描述

我有一个Django项目，为用户提供将用户帐户与Twitter和Facebook等社交网络帐户相关联的可能性。这与Django Social Auth一起使用，它基本上提供了一个标签，以了解当前用户是否已经有关联的帐户。它允许以下代码相应地显示URL：

 < fieldset id =social_associationsclass => 
< legend>社交关联< / legend> 
 
 {％的关键字，在social_auth.items中的值％b $ b< img src =/ static / img / {{key}} _ icon.pngalt ={{key }}width =25height =25/> 
 {％if value％} 
< a href =/ social / disconnect / {{key}}>断开与{{key}}< / a> 
 {％else％} 
< a href =/ social / login / {{key}}>将您的帐户关联到{{key}}< / a> 
 {％endif％} 
< br /> 
 {％endfor％} 
< / fieldset> 
  

这是Django模板代码，执行时会给出以下html（当然显示的hrefs更改根据用户的个人资料，如果该帐户与社交网络相关联，此处显示连接（用于Facebook）和断开连接（用于Twitter）URL）：

 < fieldset id =social_associationsclass => 
< legend>社交关联< / legend> 
< img width =25height =25alt =twittersrc =/ static / img / twitter_icon.png> 
< a href =/ social / disconnect / twitter>断开与Twitter的连接< / a> 
< br> 
< img width =25height =25alt =facebooksrc =/ static / img / facebook_icon.png> 
< a href =/ social / login / facebook>将您的帐户关联到facebook< / a> 
< br> 
< / fieldset> 
  

这是正常工作，但有各种缺点。首先点击时，链接将通过打开关联/断开页面而丢失当前的导航。这可以通过不打开它们解决，只需调用一个GET，如果存在（我记得使用javascript发送一些数据，GET也必须可能也是可能的）。那么另一个缺点是当点击链接不会自动更新时，页面必须重新加载。这可以通过更改href来显示'disconnect'，如果它是关联和关联，如果它是断开连接，并切换URL也可以解决。

解决方案

不是最好的方式...

...但是一个快速的（使用jQuery）。你应该能够改进它，创建例如相应的ajax视图。

（未经测试的代码，但提出想法）

（$）$ {code $ $''''''''
$（'＃social_associations'）。load（$（this）.attr（'href'）+'#social_associations'）;
}）;

I have a Django project that offers its users the possibility to associate a user account to some social networks accounts like Twitter and Facebook. This works with Django Social Auth which basically provides a tag to know if the current user has already associated accounts or not. It allows the following code to display URLs accordingly:

<fieldset id="social_associations" class="">
    <legend>Social Associations</legend>

{% for key, value in social_auth.items %}
    <img src="/static/img/{{ key }}_icon.png" alt="{{ key }}" width="25" height="25" />
    {% if value %}
        <a href="/social/disconnect/{{ key }}">Disconnect from {{ key }}</a>
    {% else %}
        <a href="/social/login/{{ key }}">Associate your account to {{ key }}</a>
    {% endif %}
    <br />
{% endfor %}
</fieldset>

This is Django template code, when executed it will give the following html (of course the displayed hrefs change based on the user's profile, if the account is associated or not with the social network, here I display both the connect (for Facebook) and disconnect (for Twitter) URLs):

<fieldset id="social_associations" class="">
<legend>Social Associations</legend>
<img width="25" height="25" alt="twitter" src="/static/img/twitter_icon.png">
<a href="/social/disconnect/twitter">Disconnect from twitter</a>
<br>
<img width="25" height="25" alt="facebook" src="/static/img/facebook_icon.png">
<a href="/social/login/facebook">Associate your account to facebook</a>
<br>
</fieldset>

This is working ok but there are various drawbacks. First when clicked, the links will lose current navigation by opening the associate / disconnect pages. That could be solved by not opening them, just calling a GET with javascript if that exists (I remembering calling POST with javascript to send some data, GET must be possible too?). Then another drawback is that when clicked the links do not update automatically, the page must be reloaded. This could be solved by changing the href to show 'disconnect' if it was 'associate' and 'associate' if it was 'disconnect' and switching the URL as well.

解决方案

Not the nicest way…

… but a fast one (using jQuery). You should be able to improve it whit creating eg corresponding ajax views.

(untested code, but to give an idea)

$('a', '#social_associations').live('click', function(e){
    e.preventDefault();
    $('#social_associations').load($(this).attr('href') + ' #social_associations');
});

这篇关于javascript点击更改href并在新窗口中打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！