I often work with three variations of a web page, 1) a dev url, 2) a preview/staging url, and 3) and live url.
I would like to create a link (bookmarklet?) that I can then add to my bookmarks bar that will change part of the URL string (basically everything before the page name) and then load the resulting URL in a new tab (or same tab if easier).
Example:
working on a page with the Dev URL:
https://dev.mysite.com/cf#/content/www/page1.html
I would like to be able to click the link and have the page reload and return the following staging URL in the same or new window/tab:
https://preview2.mysite.com/page1.html
and then if I click the link again, I would like the page to reload and return the following live url in the same or new window/tab:
http://www2.mysite.com/page1.html
and then if I click the link again, I would like the page to reload and return the following dev url in the same or new window/tab:
https://dev.mysite.com/cf#/content/www/page1.html
So, I would basically like to avoid a lot of cut/copy and paste when I am changing through these variations of the url while developing, testing, and visiting the live versions of the page.
Here is where I am so far.. Stuck on the most basic aspect of it, if on the dev page, reload to preview page:
A variation of the method by joewiz.org "fixing-urls-with-dns-errors"
and this one from Stack user63503 "how to replace part of the URL with JavaScript?" and after also trying str.replace from W3Schools.
javascript:(function(){window.location.url.replace("dev.mysite.com/cf#/content/www/","preview2.mysite.com/");})();
or
javascript:(function(){window.location.pathname.replace("dev.mysite.com/cf#/content/www/","preview2.mysite.com/");})()
Thats just one of the steps as you can tell and I'm already stuck. I have tried so many variations but I cannot replace a specific part of the url, let alone add the rules to reload to dev, preview, live depending on where the current browser is.
I realize that very similar questions have already been asked, but I'm afraid that I am unable able to extrapolate actionable information from the ones that I have found. However, please let me know if you feel a previous post is relevent and I'll head over there and study-up.
Thank you all so much!!
Your code should work.
But try this
javascript:(function(){var loc=location.href;loc=loc.replace('dev.mysite.com/cf#/content/www/','preview2.mysite.com/'); location.replace(loc)})()
Remember to copy this into the URL of a real bookmark - I normally send people a web page they can drag from so the quotes are indeed important:
ReplaceUrlBM
Related
I want to extract subtitles from this YouTube page (link).
I found timedtext, when looking via 'View page source'.
But not when I search via javascript console. It won't find it:
document.querySelector("html").innerHTML.match("timedtext")
But for this other YouTube page, it does actually work both.
How come the difference and how to fix it?
As I commented, if you want to extract the subtitles using this way, consider instead search for the script tag that has the ytInitialData variable = that's the one that has the url of the timedtext.
I can't tell the difference, but, I assume the javascript code injects the HTML code once the page is loaded.
After pasting the line you share in your comment:
ytInitialPlayerResponse.captions.playerCaptionsTracklistRenderer.captionTracks
I got the timedtexts in the available languages. Keep in mind, though, probaly not all videos has auto-generated captions - example
In that example, I didn't get the captions, so, I don't think that inspecting the source code of the page works for all videos.
I had this really strange problem that I figured out the solution to and I wanted to share it with the world, so I'm going to ask a question on here and answer it myself. Probably some other people will have better, more thorough answers than mine.
I have this link on a web page:
Review Side 1 Personalization
Here's the javascript function referenced in the link:
function PreviewPersonalization(pageDesc) {
window.open(pageDesc,'','toolbar=no,location=no,directories=no,status=yes,menubar=no,scrollbars=yes,resizable=yes,width=750,height=650,left=0,top=0');
}
When I click the link, the function runs and opens the url in a separate window, and it runs that .asp page, but it produces a broken preview image, as if there were some problem with the url parameters.
When I copy the link text into the url bar of a separate window, and strip away the call to PreviewPersonalization, that works fine.
When I copy the link text into the JavaScript console and run it (stripping off the "javascript:" part of the link text so it just directly runs the PreviewPersonalization function, passing in the parameter that has been built into the link text), that also works fine.
So there's nothing wrong with the link text or the url parameters or the JavaScript function - So what is going on? Why doesn't clicking on the link work?
Stay tuned for the bizarre story..
Debugging uncovered that the string passed to the PreviewPersonalization function had #FFCC00 instead of %23FFCC00. So the url was at that point invalid, so that none of the url parameters were making it into the code of ShowGolfBallPersonalization.asp.
The act of clicking on the link text was causing the browser to url decode the link text before processing it as JavaScript.
What the freak? The html doctype is 4.01, and I think there's "strict" mode mentioned somewhere, maybe that has something to do with it. But that is just bizarre to me. Anyway, having the JavaScript function re-url encode the url to be opened in a separate window fixes the problem.
The website i'm trying to link to is pretty much a text document (see below), i'm trying to link to the last line preferable, highlighting it would be ideal but a link to the end of the page would work.
I've tried various code snippets, but as i have no access to the code of the page i cannot create anchor in the target page and link directly to that.
if i can get the following code to run on the page once i have navigated to it, i believe that would solve the problem, but my JS knowledge does not extend that far
window.onload=toBottom;
function toBottom()
{
alert("Scrolling to bottom ...");
window.scrollTo(0, document.body.scrollHeight);
}
i am linking using the following code
`— Alan Turing `
http://www.loebner.net/Prizef/TuringArticle.html
I would deeplink and find an ID on the remote page and link directly to that so for example
www.loebner.net/Prizef/TuringArticle.html#ELEMENTID
However if the page does not have an element at the bottom with an ID then might be a problem, do you have access to that page to add an ID?
Cleanest solution was contacting the site administrator of the site and setting up a mirror on my server of the original file and adding an #ID to the element i wanted to deeplink to and linking to the #ID from within my webpage
href="<c:url value="loebner#ID"/>"
I'm trying to make a custom Facebook share function for my website, and I'm using the Facebook sharer URL to open Facebook share in a popup window. However, for some reason it doesn't work.
What I'm doing is simple:
function shareFB(){
var img=$('#fb_img').html();
var text=$('#fb_share').html();
var url=$('#fb_url').html();
var full_url='http://www.facebook.com/sharer.php?s=100&p[title]=MyTitle&p[summary]='+text+'&p[url]='+url+'&&p[images][0]='+img;
window.open(full_url, 'sharer', 'toolbar=0,status=0,width=548,height=325');
}
The weird thing is, it doesn't matter what values I give to img, text and url or even if I use all of them. In the example below, I removed img completely and set text="whatever" and url="http://www.domain.com/stats_leagues.php".
https://www.facebook.com/sharer/sharer.php?s=100&%3Bp[title]=SportFant&%3Bp[summary]=whatever&%3Bp[url]=http%3A%2F%2Fwww.domain.com%2Fstats_leagues.php
Yet it doesn't work - it just opens an empty popup. Why? I've used the same URL format for Facebook shares a dozen times and it always worked. Even copy/pasting the formatted URL above into my browser just opens a blank page.
I don't know from where you got all those parameters, like s=, p[title], etc., probably from some old version of facebook share?
On Facebook share button docs, under FAQ, it says:
Yes, although we recommend using the Share button to offer the simplest and most consistent experience for people using your site, you can invoke the Share Dialog using a link: <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fparse.com" target="_blank">
So just change your code to:
function shareFB() {
var url = $('#fb_url').html(); #encode url if it is not already
var full_url = 'http://www.facebook.com/sharer.php?u='+url;
window.open(full_url, 'sharer', 'toolbar=0,status=0,width=548,height=325');
}
FAQ also states that Facebook will scrape your page for additional info, like title, image, etc. It scrapes your OG meta tags from your page. Debug it here.
I am currently working a new feature to allow users to select the thumbnail they would like to use when sharing an page on Facebook. The user should be able to use the Facebook widgets like the send dialog or share buttons as well as simply cutting and pasting the URL into their udpate status dialog on Facebook.
I have read much of the documentation, which seems to indicate that I simply need to add multiple og:image tags in the page being shared. I have done this and run the page through the linter so the cache gets updated.
When passing the page to the share.php directly, effectively removing any of my client side code and letting the dialog present what it is scraping, I am seeing 3 images from the page available.
I am not sure what I am doing wrong here.
Here is the linter result, the graph object, the sharer.php link and the page. Anyone have ideas of what I could be doing incorrectly?
I have confirmed that at least the og:title tag is being respected by the share dialog. I have also tested the size of the images, and included file extensions as suggested below.
I know this works because buzzfeed has the exact functionality I am going for. I have reduced my example down to only the core pieces I think should work. You can find the full source here.
Could it be the XML namespace in the top HTML tag?
In the BuzzFeed article, it's:
xmlns:og="http://opengraphprotocol.org/schema/"
In your page its:
xmlns:og="http://ogp.me/ns#"
On the Buzzfeed article, the content attributes in the og:image links point to named .jpg files, vs your links which do not have a filename/extension at the end.
It may be required to include a filename in the links, especially if it's basing image detection on the file extension.
EG:
Buzzfeed:
<meta property="og:image" content="http://s3-ak.buzzfeed.com/static/campaign_images/webdr02/2013/3/18/11/10-lifechanging-ways-to-make-your-day-more-effici-1-2774-1363621197-4_big.jpg" />
Yours:
<meta property="og:image" content="http://statics.stage3.cheezdev.com/mediumSquare/3845/4AC356E3/1"/>
After some tests, I guess it's a caching issue.
Looks like the sharer is caching the graph, using the og:url as a key, so that different querystrings in the sharer won't bypass the cache, if they do not impact the og:url value.
Obviously, the debug tool don't use such cache.
If I'm right (this is just an insight), you can either wait that the cache entry expires or try with a different og:url. Moreover, to ease the test, keep the new og:url equal to the new page location.
So funny story, I'm a developer at BuzzFeed and came across this while trying to figure out why our share dialogs suddenly stopped showing the thumbnail picker.
It looks like Facebook disabled the functionality. It briefly made a reappearance on 1/14/2014 but they introduced a bug that prevented sharing from any pages with multiple og:image tags defined. (See: https://developers.facebook.com/bugs/1393578360896606/)
They fixed the bug, but as of 1/22/2014 it still looks like the thumbnail picker is disabled.
The Sharer.php script on the Facebook site doesn't support all the OG tags as far as I know. The images are scraped from the page content itself, so if you want your three images to appear on the Sharer.php script, include them in your content.
Sharer.php has been officially deprecated by Facebook, so I wouldn't be surprised if certain functionality does not work with it. While it still works, it was always the simplest option and I'm guessing they never built the link image scraping from the og items into it.
I was able to find this article, which shows one way that you can specify exactly what images are available to the sharer.php share page. You can specify one (or multiple) images to share with a URL structure like the following:
http://www.facebook.com/sharer.php?s=100
&p[url]=http://bit.ly/myelection
&p[images][0]=http://election.gv.my/assets/vote.png
&p[title]=My customized title
&p[summary]=My customized summary