1

I'm adding some social share links to a site. In the HTML, I just have basic links like:

<a class="facebook_share" href="https://www.facebook.com/sharer/sharer.php">Facebook</a>

I'm using jQuery 1.10.1 to append parameters (current page url and, for some social networks, the current page title) to the link href. Here's an example:

jQuery(document).ready(function($) {
"use strict";
var $title = $(this).attr('title');
var $href = $(location).attr('href');
// Facebook
var fb_url = $("a.facebook_share").attr("href");
$("a.facebook_share").attr("href", fb_url + "?u=" + encodeURIComponent($href)); // add  encoded version of current page href to FB url
});

In IE7, I'm getting "error on page" as follows: Line: 0 Char: 0 Error: Script error Code: 0

So in IE7, the parameters don't get added to the link href.

Chrome, F'fox are OK. IE8 is OK now I'm testing on public server but was giving "line 5: object doesn't support this property or method" when I was testing on my local WAMP server.

Test page with links to 4 networks here:

http://test-interact.co.uk/test_social_share_links.htm

user1668414
  • 13
  • 1
  • 6
  • 1
    Keep in mind that Internet Explorer tends to run in a different mode when you're running it on a local domain (aka intranet). There is a way to turn it off but I've forgotten how. – Halcyon Sep 09 '13 at 14:50
  • 2
    Why are you doing `$(this).attr('title')` and `$(location).attr('href')`? Try using `document.title` and `location.href`. jQuery should only be used for DOM elements. – gen_Eric Sep 09 '13 at 14:51
  • @FritsvanCampen: "Tools" (press `Alt` if your menu bar is hidden) > "Compatibility View Settings". There's a checkbox for `Display intranet sites in Compatibility View`. – gen_Eric Sep 09 '13 at 14:51
  • 2
    @FritsvanCampen - in fact IE7 doesn't do this. In IE8 and higher, the mode you're thinking of puts them into IE7-compat mode. – Spudley Sep 09 '13 at 14:52

4 Answers4

3

This is in regards to properties vs attributes. Attributes are set, and then do not change, properties change. Thus, properties on the document/page etc. (title, href) change and can be accessed as changed, the attributes retain the original value and do not change when they are "really" a property.

These access the "document" attributes:

var $title = $(this).attr('title');
var $href = $(location).attr('href');

These access the current property values:

var $title = document.title;
var $href = location.href;
duellsy
  • 8,157
  • 2
  • 33
  • 60
Mark Schultheiss
  • 30,473
  • 11
  • 66
  • 95
2

jQuery's $() function is only meant for "wrapping" DOM elements.

var $title = $(this).attr('title');
var $href = $(location).attr('href');

Chances are, this is what's breaking it in IE7. This is not the correct way to access these properties.

Try using the native properties:

var $title = document.title;
var $href = location.href;
gen_Eric
  • 214,658
  • 40
  • 293
  • 332
1

You should not access to the title by DOM, you must use document.title variable

var title = document.title

should solve the problem

Fez Vrasta
  • 12,758
  • 19
  • 86
  • 149
  • He's not editing the title, but I still agree with using `document.title` vs `$(this).attr('title')`. – gen_Eric Sep 09 '13 at 14:53
0
var $title = document.title;
var $href = location.href;
gen_Eric
  • 214,658
  • 40
  • 293
  • 332