WebKit losing parameters in URLs with skip links - webkit

We have some generated pages whose URLs contain parameters, like http://example.com/page.do?param1=hello. These pages contain named anchors inside, <a name="here">like this</a>. And there are corresponding links that reference the named anchors, like this. Most folks today call these "skip links".
Clicking a skip link should result in the browser creating and following a URL that matches the original one, with the named anchor tacked on at the end: http://example.com/page.do?param1=hello#here
On Firefox and IE, this works fine. On Chrome, Safari and other WebKit-based browsers, the parameters are lost, leading to http://example.com/page.do?#here which is invalid for our site, and just causes a 404 error.
Interestingly, if you manually put the full link in the location bar and press Enter, it behaves properly.
I've googled around a while and seen a lot of discussion about WebKit having problems with skip links, but none of them match the situation here where it's losing parameters.
Is this loss of parameters a known bug? Has anyone seen a workaround?

I encountered the same issue. From what I can say this is related to the usage of a meta tag like this: <base href="http://example.com" />. Once it is set my links point to example.com#foo instead of example.com?foo=bar#foo.
Knowing that I found this question. So the anchor tag behavior is a known thing:
Is it recommended to use the <base> html tag?
Since I can't remove the base tag I'll try to handle this with JavaScript.

Related

Google+ : Multiple +1 on same page, different content

I've tried to find an answer to this (both in the dev docs and here), but with no luck.
The "+1 button" works fine on normal pages (where there's just the single +1). But I have a page with multiple entities (to use the terms of Drupal: A View displaying multiple nodes) where I'd like to add "share buttons". So far I've added Twitter and Facebook.
Twitter is the simplest as it just takes the string you give it..
Facebook takes an url, but you can specify your own url.
When I try to specify my own url for +1 I get this Error:
Unsafe JavaScript attempt to access frame with URL http://one80.seasites.se/whats-up from frame with URL https://plusone.google.com/_/+1/hover?hl=sv&url=http%3A%2F%2Fone80.seasites.se%2Fwhats-up%2Fl%25C3%25B6rdag&t=1342724634133&source=widget&isSet=false&referer=http%3A%2F%2Fone80.seasites.se%2Fwhats-up&jsh=m%3B%2F_%2Fapps-static%2F_%2Fjs%2Fgapi%2F__features__%2Frt%3Dj%2Fver%3Dr4LFRxx-_oY.sv.%2Fsv%3D1%2Fam%3D!ZCfx2q5v6YmYvWjcTQ%2Fd%3D1%2Frs%3DAItRSTNI50TT3SY8R9klRLc_1sBJ5_Rp3g#id=I3_1342724634541&parent=http%3A%2F%2Fone80.seasites.se&rpctoken=619983104&_methods=mouseEvent%2CtrackingEvent%2ConVisibilityChanged%2C_onopen%2C_ready%2C_onclose%2CcloseOrHideThisBubble%2C_close%2C_open%2C_resizeMe%2C_renderstart. Domains, protocols and ports must match.
rs=AItRSTOQ10u7fGwgD-LqzsOa-fsgdlhDCg:173
ec.a.v rs=AItRSTOQ10u7fGwgD-LqzsOa-fsgdlhDCg:173
xh rs=AItRSTOQ10u7fGwgD-LqzsOa-fsgdlhDCg:203
q.get rs=AItRSTOQ10u7fGwgD-LqzsOa-fsgdlhDCg:211
ec.w rs=AItRSTOQ10u7fGwgD-LqzsOa-fsgdlhDCg:173
Rh rs=AItRSTOQ10u7fGwgD-LqzsOa-fsgdlhDCg:208
q.w rs=AItRSTOQ10u7fGwgD-LqzsOa-fsgdlhDCg:220
Rb rs=AItRSTOQ10u7fGwgD-LqzsOa-fsgdlhDCg:30
Xg rs=AItRSTOQ10u7fGwgD-LqzsOa-fsgdlhDCg:187
(anonymous function) rs=AItRSTOQ10u7fGwgD-LqzsOa-fsgdlhDCg:226
To explain why I want to use separate URL:
every node is something like an event, every node has it's own url (which contains an image and text/info). So when you click Like (for FB) it gets the title, info & image and includes it in the post (So it says "What's up - Gathering", instead of a generic "What's up" and no/the same image).
I'd like to accomplish the same with G+.
Is there a way to accomplish this for G+?? Have I missed something??
I guess one way to do this is by using an iframe for each of the nodes and pull in a special version of the "node page" with just the g+-button. But that's a pretty nasty hack (and not that fun to set up).
Any ideas are welcome!
The error you're seeing is actually due to an issue in Chrome. The +1 button should automatically recover.
You can explicitly specify target pages by using the href attribute. Your markup will look like this in practice:
<g:plusone href="http://example.com/targeturl"></g:plusone>
Or like this with HTML5 syntax:
<div class="g-plusone" data-href="http://example.com/targeturl"></div>
If these don't work, can you share a link to a page where you're seeing it not work? I can take a look :)

SEO: Can dynamically generated links be crawled?

I have a page containing <div> tags with onclick="" code that calls an ajax request to get json data, and then iterates through the results to form links (<a />) to append to the page. These links do not exist in any other place on my website. How can I make these dynamically generated links crawlable?
My initial thought was to turn the <div> tags into <a> tags with a href="#", but with my limited knowledge of how typical crawlers work, i don't think this would solve my problem since the "#" would be what's recognized by the crawler, and not necessarily the dynamically generated output. This is besides the point that i don't want the scroll positioning to be altered at all, which would also rule out giving the <a> tag an id and having it reference itself.
Do I have any options aside from making a new page containing all of the links i need to be crawled? Thanks.
As a general rule, content that is created or made available through JavaScript cannot be found or indexed by search engines. Google does support crawlable Ajax but using it as the only means of accessing your content is bad for accessibility. Also, other search engines can't get to that content which is also not a good thing. Basically crawable ajax is a bad thing.
You should always make your content available without requiring JavaScript to get it. Then you can improve your site by adding JavaScript to make getting the content faster or easier. This is called Progressive Enhancement and is how good websites are built.

non-secure items in IE6

my site is https and so I had to go through it and make sure everything on the page was secure. This worked for every browser except IE6, which gives an error saying that the page contains both secure and non-secure items. I cannot find a non-secure item on this page and it is driving me mad! Can anyone spot whats causing it?
The site is http://preview.tinyurl.com/4kk5u7q
Thanks
When I try browsing the page (with Safari on OSX, in case it matters) I see that there are some resources which are described as about:blank. IIRC, IE6 thinks that that source is insecure. (I also get a syntax error in one of the inlined scripts.)
Agreed with Chris.
This bug affects both <FRAME> and <IFRAME> element.
IE checks whether the attribute "src" points to a realistic page or not. It won't pass even if "src" attribute is simply missing. Try the followings:
Just create a blank page named "blank.html" or whatever you want.
Then you can point "src" attribute to the blank page when <FRAME> or <IFRAME> element is being created.
Example as below:
<frame src="blank.html" id="foo" name="foo" >
This should do the job;)

Problem with internal anchors and links

I've set up a brochure ware kind of site - with links to different sections in the page.
http://www.leoniepalmer.com/
When clicking a menu item in the top right corner, everything works great!
Now I have a second page at
http://www.leoniepalmer.com/our-gourmet-tours/
And I want the menu to then go back home to the relevant anchor, that is, clicking About will go to
http://www.leoniepalmer.com/#about
Unfortunately (in FF 3.5.6 at least), it seems to append it to the URL and it becomes quite ugly, as well as not going to where it should!
Could it be this rule in my .htaccess, that appends a trailing slash to pages without one?
# Add trailing slash if missing
rewriteRule ^(([a-z0-9\-]+/)*[a-z0-9\-]+)$ $1/ [NC,R=301,L]
How could I modify it to work, or is there something else at play here?
UPDATE
I don't think the answer is helpful at all.
You can link to an Id using the #anchor fragment.
OK, I'm guessing it's because you're using a <div> tag as the target of a link.
Properly, named tags that are the target of links to a location in a page are also <a> tags, your syntax is similar to
<a name="about">About Leonie and Stef Palmer</a>
Here's the source:
source
This creates an anchor around the text "This is the location of anchor one.". Usually, the contents of A are not rendered in any special way when A defines an anchor only.
Having defined the anchor, we may link to it from the same or another document. URIs that designate anchors contain a "#" character followed by the anchor name (the fragment identifier). Here are some examples of such URIs:
An absolute URI: http://www.mycompany.com/one.html#anchor-one
A relative URI: ./one.html#anchor-one or one.html#anchor-one
When the link is defined in the same document: #anchor-one
Just to be safe, you might want to make the link in your navbar to the full document:
About
Not only is this one of the use cases described above, it saves Apache some work. Including the full path lets the browser go straight to the page, whereas not including the name of the document means the browser has to ask Apache on your server what the name of the page is and then go there - 2 connections for the price of 1

HTML encoded links and anchors

I have a use case where I am setting the page focus to a particular element (having an anchor before it). When a user is not signed in, there is a redirect to the login page and after signing in, the user is redirected to the page in question, with the URL encoded.
I see that a URL of the form link#target works as expected (focusing on the element) while the url encoded link link%23target doesn't. Is this expected behavior?
Edit: If this is the expected behavior, is there a work around to focus on the target? As in, a way around url encode?
Edit adding more info:
Assuming that there is a code
page1.html
... html before the anchor ...
<a name="test">Some code</a>
... html after the anchor ...
I am accessing the page as page1.html%23test. This doesn't work the same way as page1.html#test. Is there a jQuery method to implement this? Would location.hash contain test even after it has been url encoded? I have no control on changing the url encoding.
Edit:
As I knew which named anchor I wanted to go to after page is redirected, I did a
window.location.hash = namedAnchor
to solve the issue. This JS line is output only if a customer is successfully signed in. Solved my issue, though not the generic answer I was looking for. I was looking for a way to avoid escaping of # in url encode.
Yes. Encoding the # as %23 effectively says "I just mean a plain old "#" character, not a URL fragment". The same is true of other reserved characters: escaping them stops them from having special meaning in the URL.
In your case you do want to encode the URL when passing it to your login page as a parameter, but your login page should decode the URL before performing the redirect.
You can both parse this string with PHP or other script language, or with JavaScript using the encodeURIComponent. I wrote an article for that, you can check on http://www.stoimen.com/blog/2009/05/25/javascript-encode-cyrillic-symbols-with-encodeuricomponent/
Hope that can help you. However despite the default behavior you must check with either method.