Get the text fragment part of current URL from window.location - javascript

I wanted to have a custom layout for anyone visitsing my website with text fragment link.
eg. https://en.wikipedia.org/w/index.php?title=Cat&oldid=916388819#:~:text=Claws-,Like%20almost,the%20Felidae%2C,-cats
Here the part after :~: will be the text fragment. I wanted to get that part.
I have tried window.location.href and window.location.hash. But
window.location.href returns just the url without text fragment while window.location.hash returns an empty string.
To replicate this visit this https://en.wikipedia.org/w/index.php?title=Cat&oldid=916388819#:~:text=Claws-,Like%20almost,the%20Felidae%2C,-cats by copying and pasting it to new tab, and try getting the text fragment from window.location (markdown link seems to have problem with text fragment).
So is there any other way to get the text fragment part in address bar ?

You can get the text fragment via performance.getEntriesByType("navigation")[0].name (you can run a regular expression to get the actual value, like performance.getEntriesByType("navigation")[0].name.split('#:~:text=')[1] [but you probably want to make this more forgiving and error-resistent]).

It's currently different based on browser.
Firefox
window.location.href and window.location.hash work as they have worked since the dawn of Javascript and behave exactly as you would expect.
Chrome
Recent
changes have modified fragment behavior. Chrome will now remove parts of the URL if :~: appears in the URL. 😱
As #DenverCoder9 pointed out, the only guaranteed way to get the whole URL, what should be a simple task, is now only accomplishable in Chrome via the performance API, performance.getEntriesByType("navigation")[0].name. This task that used to be accomplishable via window.location.href, window.location.hash, and document.URL is no longer possible without this gotcha.
We hope Chrome's new behavior, requiring performance.getEntriesByType("navigation")[0].name compared to window.location.href, is reverted back. This new behavior of "removing parts of the URL" is unprecedented and we consider it harmful.
Worse, if using protocol file://, there is no way to get the URL as performance will not report the URL. 😱
Related, see issues:
https://github.com/WICG/scroll-to-text-fragment/issues/193
https://github.com/WICG/scroll-to-text-fragment/issues/74#issuecomment-1215767738
Keywords: "text fragments", "fragment directives"

Related

Encoding URL vars in HREF versus onclick using JS window.location

I don't know why this link does not work, but I have a Javascript redirect (window.opener.location) that I am passing a number of variables through the URL and am having issues when those variables contain apostrophes. I am using URLENCODE() in PHP to build the link, which looks like it is doing what I need when I dump the source, but Safari and Chrome both throw "Unexpected identifier at 'www'" errors when I click the link.
This seems to tell me that the JS link is still being treated as if it has an apostrophe instead of the %27 equivalent of an apostrophe? I am using a dummy name "qqq'www qqq'www" with apostrophes in first and last name for my testing to break as much stuff as possible.
Here is the link I am having trouble with:
<em>Yes</em>
But if I change the link to use onclick instead of the HREF, it works? I realize this is the better coding method than href='javascript:...' too.
<em>Yes</em>
Everything is identical except where I make the JS call. Is this possibly due to the way the HREF and onclick are handled on encoding/decoding? Maybe the HREF is un-encoding the apostrophes prior to making the link call because the JS is embedded in the HREF call?
Any insight into this behavior would be appreciated so I can better understand what is really going on here. Yes it works, but not knowing why makes me feel like a worse developer...
Thanks!
Your links do not have a > to end the starting <a - and yes, do not use href="javascript:
Also if you need to encode, use encodeURIComponent and lastly do not try to close the window before changing the opener.
But why not name the opener and user a target and a setTimeout?
<a target="nameOfOpener"
href="../cust/maint_cust.php?action=del_are_you_sure&cust_id=249735&lname=Qqq%27www&fname=Qqq%27www"
onclick="setTimeout(function() {top.close()},100)"><em>Yes</em></a>
Browsers give a special treatment to href attributes starting with 'javascript:'. Any %xy encoding, as in your case the %27, will be decoded first before executing the Javascript code. I checked this for current versions of Firefox and Chrome. I would be curious to find a documentation of this feature.
The short answer is: Do not use 'javascript:' in a href, if your Javascript code contains %xy encodings.
In case you really have to use 'javacript:' in a href, put your URL into a javascript variable and then reference that variable in your href's Javascript code.
<script>
myURLwithEncodings = "../cust/maint_cust.php?action=del_are_you_sure&cust_id=249735&lname=Qqq%27www&fname=Qqq%27www";
</script>
<em>Yes</em>

GreaseMonkey: Redirect immediately to special web page

I know my way around in different programming languages, but I'm actually new to javascript and GreaseMonkey. After some searching (here and on the net), I could not find an answer to the following problem:
I want to have a local javascript that works on Zeit Online and forwards me automatically to the complete article view (that is not divided into several subpages).
Example:
When I call
www.zeit.de/wirtschaft/2015-02/griechenland-euro-schaeuble-varoufakis
I want to be redirected immediately to
www.zeit.de/wirtschaft/2015-02/griechenland-euro-schaeuble-varoufakis/komplettansicht
(note the /komplettansicht at the end).
Exemption:
On www.zeit.de/index I want to change nothing. One could say that extending the URL requires that the webpage URL consists of www.zeit.de and a subdirectory.
How do I do that in javascript/GreaseMonkey?
update:
var regex = /^(https?:\/\/.+\.zeit\.de\/.+\/.+)$/i;
and
.replace(regex, "$1/komplettansicht");
should surface in the code. But how do I replace the URL and call it?
Try this in the javascript console first:
window.location = window.location.href + "/komplettansicht";
maybe need to wrap this line of code in an if statement that checks that you aren't on the homepage of zeit.de any longer, and that the page does not end with "komplettansicht" (it would redirect forever to komplettansicht/komplettansicht/komplettansicht...)
But then a dialog box with a warning may open asking if you really want to leave the page. Not sure about that.
If it doesn't work, replace window. with unsafeWindow. (Greasemonkey wraps the raw window object with a new object of this name)

Twitter auto shorten URL not working

I am trying to add custom tweet button to my website and all is well but it is not shortening the URL. I am using URL query string instead of javascript. Is that the case?
<a class="btn btn-tweet" target="_blank" href="https://twitter.com/share?text='.$title.'&url='.$url.'&via='.$user.'&wrap_links=true">Twitter</a>
I have read some API document and saying above 19 characters twitter shorten url itself. Just wonder why it is not converting with this.
I am also having trouble to open in popup instead of new window. Does this all possible without adding any separate javascript code but directly inline in anchor tag?
I was hung up on this and realized I was trying to shorten "http://localhost:5000/blog/url" which t.co is unable to do.
Change to a real, non-localhost URL and it worked fine.
It won't be visibly shortened in the compose window, but the compose window does detect URLs and adjusts the character count accordingly. Try pasting a huge long URL - it'll only use up 22 characters in the count.
Do note that Twitter shortens all URLs, even when "shortening" actually makes them longer. For example, "http://bit.ly" will use up 22 characters (not 19), not 13.

Twitter API Basic Timeline Operations

I have a website where I am using the Twitter API to get my three latest tweets. No problem there. However, if I post a retweet, when the call is made for the latest tweets, it shows the beginning "RT #DennisDMZ" and the retweets, but the return is truncated to 140 chars including the RT #DennisDMZ string.
Also, if there are links, the anchor tags are not created and the crypted url just shows as regular text. I set the parameter include_entities=1 in the API call, and it returns the url information, but it does not automatically add the anchor tags. It even shows the position of the link, so technically you could build the link dynamically but that would be difficult.
Is there a way to get around either of these problems?
I think they make it more difficult...I was able to look at the return object on Firebug with a console.log and see what is returned. The full text is under the 'reseller_status' property and the url under the 'entities' property, The url is given and the character positions as well, so I wrote an insert function to insert the anchor tags at the appropriate positions.

Disable JavaScript in iframe/div

I am making a small HTML page editor. The editor loads a file into an iframe. From there, it could add, modify, or delete the elements on the page with new attributes, styles, etc. The problem with this, is that JavaScript (and/or other programming languages) can completely modify the page when it loads, before you start editing the elements. So when you save, it won't save the original markup, but the modified page + your changes.
So, I need some way to disable the JavaScript on the iframe, or somehow remove all the JavaScript before the JavaScript starts modifying the page. (I figure I'll have to end up parsing the file for PHP, but that shouldn't be too hard) I considered writing a script to loop through all the elements, removing any tags, onclick's, onfocus's, onmouseover's, etc. But that would be a real pain.
Does anyone know of an easier way to get rid of JavaScript from running inside an iframe?
UPDATE: unless I've missed something, I believe there is no way to simply 'disable JavaScript.' Please correct me if I'm wrong. But, I guess the only way to do it would be to parse out any script tags and JavaScript events (click, mouseover, etc) from a requested page string.
HTML5 introduces the sandbox attribute on the iframe that, if empty, disables JavaScript loading and execution.
Yes, your update is correct. You must assume that any input you receive from the user may contain malicious elements. Thus, you must validate on the server before accepting their input.
You can try the same solution adopted by CKEditor, of which you have a demo here.
By switching from RTE mode to view source mode, you can enter some JavaScript and see the result, which is a replacement of the JS node in a safely encoded string.
If you are in view source mode, by entering some JS line like:
<script type="text/javascript">
// comment
alert('Ciao');
</script>
you will see it rendered this way when going back to rich text editor mode:
<!--{cke_protected}%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0D%0A%2F%2F%20comment%0D%0Aalert('Ciao')%3B%0D%0A%3C%2Fscript%3E-->
I think it is one of the easiest and effective way, since the RegExp to parse JS nodes is not complex.
An example:
var pattern = /<script(\s+(\w+\s*=\s*("|').*?\3)\s*)*\s*(\/>|>.*?<\/script\s*>)/;
var match = HTMLString.match(pattern); // array containing the occurrences found
(Of course, to replace the script node you should use the replace() method).
Regards.
You can set Content Security Policy as script-src 'self' in header. CSP will block any scripts other than from our own website. This way we can prevent any scripts from iframe changing the elements in our page.
You can get more information from here http://www.html5rocks.com/en/tutorials/security/content-security-policy/

Categories

Resources