Using jquery/jscript

gluepack · Post by **gluepack** » Fri 05 Jul 2013 6:53 am

Sometimes it is the simple things...

1st, if I want to incorporate jquery into a saratoga/ajax setup, where is it advisable to place the
<script type="text/javascript" src="jquery.js"></script>
(and any associated jquery add-ons) statement, as opposed to in those php files where it is actually used? Presumably in common or top but which and where?

2nd, as mentioned once before, I have a great little jscript routine that I use a lot that picks up the favicon.ico file from sites and prefixes it to links specified in li's. Unfortunately, it only picks up those that are in the root directory of the link url. If I wanted to add some code to search the <head> of the index file to retrieve the location from a <link> statement, is that possible? Part of the problem in getting solutions to things like this is knowing what to specify when you are doing a Google search. Assuming it is possible, can someone point me at an example of interrogating the index file (regardless of type) at another site to retrieve info, to give me an idea how to do it? I imagine that bots do it all the time.

saratogaWX · Post by **saratogaWX** » Sat 06 Jul 2013 6:58 pm

For JavaScripts to be included in all pages in the template, the best location for them is in top.php -- the common.php emits code to set the language and selectors, but not general HTML, so it is not a good place to have extra HTML inside.

If I understand correctly what you want with the second part (can someone point me at an example of interrogating the index file (regardless of type) at another site to retrieve info), then what you ask is not feasible using JavaScript -- the JavaScript engine is specifically prohibited from gathering data with XMLHttpRequest() from anything other than the website the page was loaded from (it's a security thing).

Bots don't use JavaScript, so they're free to directly access sites using native HTTP requests in the language the bots are written in.

So.. jquery can fetch data from your own site, but not another website based on JavaScript limitations.

Best regards,
Ken

gluepack · Post by **gluepack** » Sat 06 Jul 2013 8:04 pm

Thanks for the tip re. top.php.

However, I am a bit confused by your response re. the second part.

The jscript routine basically strips down the url in a link (in a list item) to the basic domain (e.g. if I had a link http://www.jerbils.info/saratoga/wxindex.php it would strip it down to http://www.jerbils.info/ ) and recovers the favicon.ico from there to prefix to the list item.

This appears to be contrary to what you are saying... "So.. jquery can fetch data from your own site, but not another website based on JavaScript limitations". However, being unclear of the processes involved, perhaps you mean that all you can generate is a "reference" to files on another website.

What I need is, if the favicon.ico doesn't exist in the root, to be able to read the index.? file and interrogate the <link> statements(s) in order to find out where it actually is. Given there are several examples in the templates of files being accessed on other websites, presumably it must be possible even if you have to resort to using something other than jscript to perform that particular function.

In Googling I came across a reference to someone wanting to invoke PHP from jscript and a response stated "This is, in essence, what AJAX is for. Your page loads, then javascript uses the XMLHttpRequest object to send a request to a server. After the server responds (presumably with output), a javascript event gives you a place to work with the output".
So, is the implication that I can do what I want to with Ajax?

saratogaWX · Post by **saratogaWX** » Sat 06 Jul 2013 8:22 pm

It's a subtle difference, but the sentence you quoted:

Your page loads, then javascript uses the XMLHttpRequest object to send a request to a server.

should really read

Your page loads, then javascript uses the XMLHttpRequest object to send a request to the same server the HTML page was loaded from.

The JavaScript itself can be loaded from anywhere (using a <script src="http://..."></script> in the HTML).
The browser knows which server the overall page was loaded from, and so restricts the XMLHttpRequest() function to access of relative URIs on the same server (i.e. no 'http://...' is permitted in the XMLHttpRequest() call, and if included, the host part is just ignored).

A favicon.ico is a browser-based thing (it's only used by the browser). If it exists (as a file) in the document root of the website when the site is first accessed, then it will be fetched and cached in the browser cache for display on tabs and bookmarks in the browser. If it is not found then a default image will be used (or none on some browsers).

You won't be able to use jQuery to find/access files (even the favicon.ico) on other websites due to JavaScript built-in security limitations.

If what you want to do is generate a locally presented list of links to other websites AND include their current favicon.ico in the list, then that is a job for PHP (or a manual process). Keep in mind that a .ico file is not the same as a .gif/.jpg/.png file and not all browsers may be able to present it *on* a page, but may only be able to present it in the control areas of the browser itself.

Best regards,
Ken

gluepack · Post by **gluepack** » Sat 06 Jul 2013 10:39 pm

You won't be able to use jQuery to find/access files (even the favicon.ico) on other websites due to JavaScript built-in security limitations.
If what you want to do is generate a locally presented list of links to other websites AND include their current favicon.ico in the list, then that is a job for PHP (or a manual process).

I'm not sure what you mean by the first statement. I'm not after retrieving them, I just need the url for them. Look at my Links page on my website. A jscript function collects the location of favicon.ico's from all over the place by using the method I described above. The problem is that it only uses the domain root as a location for the file. If the file doesn't exist it uses a default image.

As far as your second statement is concerned, I only need a php script or alternative for those domains where it doesn't find the ico file in the root and, surely, I should be able to use Ajax in the onerror function to call a server side php script, for example, from my jscript code, that reads the external domain root default script file, finds the appropriate <link> statement and passes the location of the favicon.ico file back to the jscript function. (Yes, I know that it sounds like a lot of work for such a small thing)

So, basically, all I am looking for is an example (or, better, examples) of a php script that will do something like that (i.e. interrogate a file on another server and retrieve a string) and the process for invoking it from the jscript and I'll customize it to suit. Surely there must be lots out there, no? But, how to specify the search terms to find them.

Again, my Googling came across this... "When using AJAX, the page that is using the JavaScript isn’t just limited to the server it is located on. The AJAX can make a call to any server online. This is how a number of plug-ins for Content Management Systems like WordPress work, and other various scripts like Google Adsense."

saratogaWX · Post by **saratogaWX** » Sun 07 Jul 2013 1:25 am

I think we're not quite understanding each other yet...

Your wxlinks.php page has

Code: Select all

function faviconizeFavilist() { 
  if (!document.getElementsByTagName) return false;
  if (!document.createElement) return false;
  var ul = document.getElementsByTagName("ul");
  for (var i=0; i<ul.length; i++) {
  	if (ul[i].className == "favilist") {
  		var links = ul[i].getElementsByTagName("a");
  		for (var j=0; j<links.length; j++) {
  			var hoststring = /^http:/;
  			var hrefvalue = links[j].getAttribute("href",2);
			if (hrefvalue.search(hoststring) != -1) {
				var domain = links[j].hostname
				var cue = document.createElement("img");
				cue.className = "faviconimg";
				var cuesrc = "http://"+domain+"/favicon.ico";
				cue.setAttribute("src",cuesrc);
				cue.onerror = function () {
					this.src = "../myPictures/external.gif";
					}
				links[j].parentNode.insertBefore(cue,links[j]);
			}
		}
  	}
  }
}
addLoadEvent(faviconizeFavilist);

which when run in the browser viewing your wxlinks.php page will dynamically create <img> tags with a dynamically created URL to the customary location/name of the favicon.ico on each <li> entry of class="faviconimg" in your list.

Whew.. it's all browser-only 'magic' and DHTML and should work fine as long as the linked site has a favicon.ico where you expect it to be (as you've said above). What you wanted to do is (as I understand it) is have your JavaScript actually check for that remote image and if not found, get the default page from the site and parse the HTML for the <link> containing the favicon spec and use that URL instead.

Assuming that is the case, then I still stand by my above discussion as by default, the XMLHttpRequest() function is limited to accessing stuff on the same server domain as the HTML page causing the JavaScript to be loaded. Yes, there are some hacks that can work around this, but using them can open up your visitors to Cross-Site-Scripting attacks and are not generally recommended.

I did a Google search on "AJAX can make a call to any server" and found http://www.noupe.com/ajax/how-ajax-works.html as the likely seminal source of the other (later) postings. The author of that article also referenced his free source http://www.nodstrum.com/2007/03/20/jque ... t-loading/ for using a proxy PHP script as the target of the AJAX query, and the PHP script on the server would do the fetch from the off-domain resource and return the response to the JavaScript requesting it -- yes, that is a way around the source-domain limitation. But, the native XMLHTTPRequest() function is still subject to the same source domain limitation.

See musings about cross-origin-resource-sharing under development
http://developer.chrome.com/extensions/xhr.html
https://developer.mozilla.org/en-US/doc ... ntrol_CORS
http://www.w3.org/TR/cors/

But ... enough wrangling this one. I have a basic question about the possible browser extra loading that your inclusion of favicons from other sites may have. Each icon would have to be fetched at least once from the remote server hosting it (and possibly cached locally by the browser).

The question is: is it worth the extra time to render the wxlinks.php page due to the extra HTTP accesses needed to fetch/display the images?

I generally prefer a fast loading, small network footprint page, but that may be only my old-school sensibilities.

Best regards,
Ken

gluepack · Post by **gluepack** » Sun 07 Jul 2013 5:20 pm

have your JavaScript actually check for that remote image and if not found, get the default page from the site and parse the HTML for the <link> containing the favicon spec and use that URL instead

The basic jscript already checks and uses an onerror function to enable a default ico. I was assuming that function could invoke the php script. Thanks for all your comments in that regard anyway. At least it smooths the understanding of what I need to do, if it is possible.

The question is: is it worth the extra time to render the wxlinks.php page due to the extra HTTP accesses needed to fetch/display the images? I generally prefer a fast loading, small network footprint page, but that may be only my old-school sensibilities.

Well, honestly, I don't think it takes that long now (did you check?) and the overhead of getting those additional ico's that aren't in the root would be negligible. Look how few default ico's there are on that page (on Chrome anyway, not IE). I did say above "Yes, I know that it sounds like a lot of work for such a small thing". As far as old-school is concerned, I was writing in assembler for a 16k H1800 back in 1966 and you can't get much more old-school than that but efficiency was on the way out well before the end of the century (lol, it was on the way out with Cobol) and it is much more about aesthetics now. My whole site is basically crap because it originated with a free template from Bravenet so I am interested in anything to pretty it up without having to redesign it completely.

Thanks

Cumulus Support

Using jquery/jscript

Using jquery/jscript

Re: Using jquery/jscript

Re: Using jquery/jscript

Re: Using jquery/jscript

Re: Using jquery/jscript

Re: Using jquery/jscript

Re: Using jquery/jscript