I'm looking for a way, how set data from var title, to other data ( var t ), and see result in page source.
Now i have:
// example: home
var title = document.title;
var t = title;
Now, in souce view, var title = document.title and var t also.
How can i parse this code, and see document.title returned value ?
Thanks for explain.
With this code:
var title = document.title
i Want to see in source code of browser:
var title = 'title of page being viewed' instead of var title = document.title
This isn't how JavaScript works.
It is a dynamic scripting language that runs in the web browser and affects that visitors page only.
When you choose View Source you are looking at the underlying code before it is executed.
If you want to pull information from another source then you need to look into either:
Screen scraping
Web services
Screen scraping is the process of downloading a webpage and then looking inside of it to pull information out. This can be messy if the website changes the layout of the page or the content is badly formatted.
A better way to provide information to 3rd party sources is to create a web service. This gives you an API which you can query and then you can return data in a computer readable format.
You mean that display the value of variable on your browser?
Just use this code:
console.dir(t);
And you can see the result on console panel.
Related
I'm creating a website that's going to have hundreds of pages. I want each page to be shareable on Facebook and Twitter. I've already created these buttons but I also want to have their respective share counters next to my share buttons. I don't want to use the standard Facebook method they provide because the coding looks bloated.
Right, so after doing some research, I found this example on codepen.
This looks exactly what I want - very simple!
However, I need some clarification and basic help with how this javascript code works:
var permalink = 'http://codepen.io';
var getTwitterCount = function () {
$.getJSON('http://urls.api.twitter.com/1/urls/count.json?
url='+permalink+'&callback=?', function(data){
var twitterShares = data.count;
$('.twitter .share-count').text(twitterShares);
});
};
getTwitterCount();
var getFacebookCount = function () {
$.getJSON('http://graph.facebook.com/?ids='+permalink+'&callback=?',
function(data){
var facebookShares = data[permalink].shares;
$('.facebook .share-count').text(facebookShares);
});
};
getFacebookCount();
This bit of code:
var permalink = 'http://codepen.io';
Does this have to be:
1) the url of the actual page I want shared, eg: http://www.example.com/page-1/
OR
2) Must this be the root of the domain name, eg: http://www.example.com/
?
Or am I missing something else?
If the answer is #1 above, then that means I have to include + edit this line for each page which isn't ideal because I have all my javascript code + plugins in ONE .js file to reduce http requests, so I'd prefer it that I don't have to add this javascript on-page for every page.
It would be the page that you want to share, but you could get around it without using a separate variable for each page by setting it to something like document.location.href for example?
I am trying to get the icon url/name corresponding to document retrieved from a SharePoint document library using the following javascript code (i am using JSOM):
function GetIcon(filename)
{
var context = new SP.ClientContext.get_current();
var web = context.get_web();
var iconName;
iconName = web.mapToIcon(filename, '', SP.Utilities.IconSize.Size16);
var iconUrl = "/_layouts/images/" + iconName.get_value();
alert(iconUrl);
}
i cant observe any problem in the code but it always shows icon name as '0' than displaying the real icon name (i.e. icdoc.gif, ictxt.gif etc).
Am i missing something here?
Please guide me through this.
Your code works fine for me. It even works if the file does not exist and with an unrecognized file extension. Also, permissions do not appear to be involved.
If you browse to the page using Chrome and look on the Network tab of the Developer Tools (F12), you can view the raw response of the request. The name of the request is "Process Query". The image below shows the area I am referring to. This should give you some more insight on the problem.
iconName will be only populated after calling executeQueryAsync
context.executeQueryAsync(function() {
var iconUrl = "/_layouts/images/" + iconName.get_value();
alert(iconUrl);
}, function() { alert("Errors"); });
I'm trying to do this by using a Tampermonkey Script. However I'm open to new approaches...
What I want to do is extract some data (data-video), from a specific <div>. However this data is not available under the HTML code of the page, but it's available under Dev Tools -> Resources and then on Frames.
Anyone knows if it's possible to get that information available under DevTools? And how can I do that?
Comparative between the two pages can be found here: "Original HTML PAGE" and "HTML PAGE under DevTools"
On the first hyperlink the id=video-canvas cannot be seen, however it's on the <object type="application/x-shockwave-flash(...)
As you state in your question the data you're looking for is available in DevTools under the "Resources" tab in the "Frames" folder. What you are looking at there is the Source HTML, similar to View Source.
The code you want, is what is getting replaced. It appears the site is using the JW Player Plugin, which is replacing the <div id="video-canvas"> with the appropriate HTML for the device / browser detected to play the video. With all of my browsers on my Mac, they are being forced to use the Flash, even when it's disabled. When using my iPhone, which can't play flash , and inspecting the page it uses JW's own custom video element. It appears that it must be storing the file location in memory since it is not in the generated markup.
I am able to run through the console in the dev tools and access their JS class. It appears i can call jwplayer._tracker , which has an object b . Object b has an object AlWv3iHmEeOzwBIxOUCPzg This object seems to be consistent each time i check between different browsers, you can use the for loop inmy first example to get the correct value but tirmming it down to .b Following that object is e and in e is the object http://i.n.jwpltx.com/v1.... really long string that appears to contain a url, so it will need to parsed.
So to get the HTML string i ran
for ( var loc in jwplayer._tracker.b.AlWv3iHmEeOzwBIxOUCPzg.e){
loc
}
so if we put that in a function to parse the string and return a value
function getSubURL(){
var initURL;
for ( var loc in jwplayer._tracker.b.AlWv3iHmEeOzwBIxOUCPzg.e){
initURL = loc;
}
//look for 'mp4:' this is in front of the file path
var start = initURL.indexOf("mp4%3A");
//look for the .mp4 for the end of the file name
var stop = initURL.indexOf(".mp4");
//grab the string between
//start+6 to remove characters used to find it
//and stop+4 to include characters used to find it
var subPath = (initURL.substring((start+6),(stop+4))).split("%2F").join("/");
return subPath;
}
//and run it
getSubURL();
it will return ciencia/astronomia/fimsol.mp4
you can run this from your console, but I am unaware of how you can use this in Tamper Monkey, but i think it gets ya a lot closer to what you wanted.
This is the approach I've used to solve my problem... I couldn't grab the code I want under Dev Tools, but I find a way to get the data from jwplayer with the function getPlaylistItem. And this is how I get the url filename of each video:
function getFilename(filename) {
var filename;
if(jwplayer().getPlaylistItem){
filename = jwplayer().getPlaylistItem()['file'];
}
else{
return filename;
}
filename = filename.substring(filename.indexOf("/mp4:") + 5);
return filename;
}
I have a javascript engine that creates a 'magazine' out of a typical web page. Several web pages would have separate 'issues', all using the same javascript engine that drives the formatting and behaviour.
The engine uses local storage to remember which 'page' of the issue the user was on when they last read the issue of the magazine.
localStorage.setItem('currentPage',JSON.stringify(currentPage));
var currentPage = JSON.parse(localStorage.getItem('currentPage'));
var remover = $('.article-wrapper:eq(' + currentPage + ')');
my problem is, if I visit page 5 of a magazine titled 'autumn', close it and open a magazine titled 'spring', then I will start on page 5 of spring automatically.
Is there a way I can set a unique 'currentPage' variable name for each issue in the html for that issue, read it with the javascript for the engine and then have it save to local storage for the computer/device the user is using?
You can test the problem by visiting these two sites. Open both. Go to page five of one site and then refresh the other. It will change to the others page number.
http://straathof.acadnet.ca/autumn/
http://straathof.acadnet.ca/portfolio/
Instead of storing the currentPage as a simple integer, store an object that keeps track of both the current page's url and the page for that url.
For example:
// When saving the current page.
var currentPage = new Object();
var url = window.location.pathname;
currentPage[url] = 9;
localStorage.setItem('currentPage', JSON.stringify(currentPage));
// When loading the current page.
var currentPage = JSON.parse(localStorage.getItem('currentPage'));
var remove = $('.article-wrapper:eq(' + currentPage[url] + ')');
If you do not like having the full URL as the key, then you could use indexOf to find the pages name. See this StackOverflow answer for more.
Let's say I have a web page (/index.html) that contains the following
<li>
<div>item1</div>
details
</li>
and I would like to have some javascript on /index.html to load that
/details/item1.html page and extract some information from that page.
The page /details/item1.html might contain things like
<div id="some_id">
picture
map
</div>
My task is to write a greasemonkey script, so changing anything serverside is not an option.
To summarize, javascript is running on /index.html and I would
like to have the javascript code to add some information on /index.html
extracted from both /index.html and /details/item1.html.
My question is how to fetch information from /details/item1.html.
I currently have written code to extract the link (e.g. /details/item1.html)
and pass this on to a method that should extract the wanted information (at first
just .innerHTML from the some_id div is ok, I can process futher later).
The following is my current attempt, but it does not work. Any suggestions?
function get_information(link)
{
var obj = document.createElement('object');
obj.data = link;
document.getElementsByTagName('body')[0].appendChild(obj)
var some_id = document.getElementById('some_id');
if (! some_id) {
alert("some_id == NULL");
return "";
}
return some_id.innerHTML;
}
First:
function get_information(link, callback) {
var xhr = new XMLHttpRequest();
xhr.open("GET", link, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
callback(xhr.responseText);
}
};
xhr.send(null);
}
then
get_information("/details/item1.html", function(text) {
var div = document.createElement("div");
div.innerHTML = text;
// Do something with the div here, like inserting it into the page
});
I have not tested any of this - off the top of my head. YMMV
As only one page exists in the client (browser) at a time and all other (virtual/possible) pages are on the server, how will you get information from another page using JavaScript as you will have to interact with the server at some point to retrieve the second page?
If you can, integrate some AJAX-request to load the second page (and parse it), but if that's not an option, I'd say you'll have to load all pages that you want to extract information from at the same time, hide the bits you don't want to show (in hidden DIVs?) and then get your index (or whoever controls the view) to retrieve the needed information from there ... even though that sounds pretty creepy ;)
You can load the page in a hidden iframe and use normal DOM manipulation to extract the results, or get the text of the page via AJAX, grab the part between <body...>...</body>ยจ and temporarily inject it into a div. (The second might fail for some exotic elements like ins.) I would expect Greasemonkey to have more powerful functions than normal Javascript for stuff like that, though - it might be worth to thumb through the documentation.