I am trying to make a link where when it is clicked, it goes to the site it is supposed to, but it also runs a cgi script. I have found different examples, but I still don't fully understand it.
In essence, I have two questions:
Where can I host the script so I can access it?
How do I access it?
Where can I host the script so I can access it?
If you want to access it from JavaScript then it has to be on the same origin (i.e. hostname and port) as the page the JavaScript is running in.
How do I access it?
You can either forget JavaScript, have a regular link and then have the CGI perform a 302 redirect, or you can use Ajax.
Beware of timing issues. It is possible for the browser to go to the next URL before it gets around to making the Ajax request. A redirect would probably be a better approach.
<script>
function callYourCGI(){
var i = new Image();
i.src = "your-cgi-url?name=value&name2=value2";
}
</script>
<a href="the-next-document.html" onclick="callYourCGI()">
The Image object is part of the HTML DOM. It allows you to manipulate images in an HTML page. Read about it here: http://www.javascriptkit.com/jsref/image.shtml
The script is creating an image object and then assigning the URL of your CGI script to the SRC attribute. This makes the browser perform a get request for the content of the URL. In this case, you aren't going to display the image object, so the content returned by your CGI script need not be a real image. If can be, if you want, though. Either way, the side-effect is that your CGI script is called, with some parameters if desired. An advantage of this method is that it does not violate the same origin policy, since images are allowed to be loaded from anywhere.
Related
I'd like to somehow get the page source of an external URL, and with that, be able to get the contents of an h1 element.
For example, this is the logic:
var url = "http://example.com";
var src = // page src of url
// instead of document, it would use the variable src
var headerText = document.getElementsByTagName("h1")[0].innerHTML;
alert(headerText);
I know I can get stuff with curl/php, but have heard larger sites will cause server strain. I'd prefer to keep this as efficient as possible. Not really sure where to start.
This cannot be done, by policy.
In Web pages, JavaScript (and client-side scripts in general) aren't allowed to access raw external resources from a different domain, in general.
The closest you're going to get is using AJAX (jQuery helps) to access a resource, but you (in general) need to be requesting a URL under the same domain.
How can I get the html of an iframe without physically putting the iframe on the page? Can I put the iframe into a variable and get it that way?
If you're using node.js (which I would recommend for this), then take a look at jsdom.
As for javascript specifically, you cannot make a call to an external page using javascript (without using hacky methods), as it would violate Cross-domain policy
An untested afterthought, but you might be able to put an iframe hidden through css and then access the content through the document/jquery.
You can make a php-page with the HTML-content,
Easily include the file with php include:
<?php
include "filename.php";
?>
but...why?
You cannot use javascript to get content from cross domain url. So even if you have actual iframe element on your page, you will not be able to access its elements using javascript. This is called Same Origin Policy.
though JSONP is an alternative to your case, you will not be able to access elements inside iframe. You can use Jquery and JSONP to get html of cross domain page
Another option For this scenario is, you can grab the content from server side scripting language like c#, PHP
Context: I'm trying to code a javascript function to like a certain post on tumblr, based on this link . I tried using an ajax call instead of changing the source of an iframe, but it doesn't work. Of course, changing the source of an iframe works.
So, what can be the difference that make this not work?
$baseUrl = 'http://tumblr.com/like/';
function LikePost( $postID, $reblogUrl )
{
/*
http://www.tumblr.com/<command>/<oauthId>?id=<postId>
<command>: like or unlike
<oauthId>: last eight characters of {ReblogURL}
<postId>: {PostID}
Exemple of Url
http://www.tumblr.com/like/fGKvAJgQ?id=16664837215
*/
$oauthId = $reblogUrl.substring( $reblogUrl.length - 8, $reblogUrl.length);
$likeUrl = $baseUrl + $oauthId + '?id=' + $postID;
$.ajax({
url: $likeUrl,
type:'POST'
});
}
AJAX requests are bound by same domain policy, with some exceptions that aren't worth listing since they don't work unless you control both domains.
In this case, you're calling a tumblr domain from your website, which you can't do through AJAX. However, iframes, script elements, and img elements can point to any domain, so if the like url isn't returning any content to you, you can use any of those means to record the like.
If you didn't want to use an iframe, the other method you could use would be to make a request to your server via AJAX, then proxy the request to tumblr. Your server can go to any url it wants.
However, the iframe approach is easiest. I suggest going that route since you already got it working. ;)
They are intended for different purposes. As jmort253 noted above, AJAX calls work only for the same domain, whereas Iframes may span different domains. But if you are interested in loading data from the same domain, AJAX may be a better option. Many times, while using IFrame, you will see a loading sign on the tab-bar of the page, showing that something inside it is loading (it's the IFrame page which is loading, not the entire page), which you don't want the user to see, because that is the point of AJAX, loading data seamlessly, giving the user the illusion that the data is coming almost simultaneously. With AJAX, you won't have these problems.
And even if you want to load data from different domains, while Javascript itself is not upto the task, you can use PHP to do the loading part, then use Javascript to fetch the data from there.
Lets assume I have my browser load an Iframe with <iframe src="test.html">
Can I, using ajax, load the content of test.html into a div in the main html page?
This idea is my solution for that fact that I'm actually trying to overcome the limitation with making ajax submits to remote hosts. The plan is to generate the dynamic page with 0 sized iframe which makes report request to remote host. Then, after the page (& iframe content) loads I will copy the iframe content into a div using JS.
Tips are appreciated,
Thank you,
Maxim.
No, you can't.
When you load a page from a different domain into the iframe, it becomes unreachable. You can no longer access the contents of the iframe, as it comes from a different domain.
The only thing that I know of that you can reliably load from a different domain is a script, which JSONP uses.
Can I, using ajax, load the content of test.html into a div in the main html page?
Yes (since your example has a relative URI and is on the same host) …
This idea is my solution for that fact that I'm actually trying to overcome the limitation with making ajax submits to remote hosts.
… and no. You still can't read data from remote hosts.
I'm sure someone will correct me if I'm wrong, but I believe that scripting across domain boundaries is restricted. Have you tried it? Here's a function that may help out.
function insertDivFromFrame(divname, framename) {
var frame = document.getElementById(framename);
var d = frame.contentWindow || frame.contentDocument;
if (oDoc.document) {d = d.document;}
document.getElementById('yourdiv').innerHTML = d.body.innerHTML;
}
I'm not sure this code works... see http://xkr.us/articles/dom/iframe-document/ for more help on this.
... you may, however, design an AJAX request to local host and retrieve information from the remote server (as described here).
If you write a php/perl/etc. script to output the contents of a document from another domain, it'll give you access to the contents as the resulting page would be considered by javascript to belong to your domain. If you're not familiar with any server-side scripting languages, I'm sure you'd be able to find a script that'll do this for you by doing a simple google search.
Best of luck.
So I need to pull some JavaScript out of a remote page that has (worthless) HTML combined with (useful) JavaScript. The page, call it, http://remote.com/data.html, looks something like this (crazy I know):
<html>
<body>
<img src="/images/a.gif" />
<div>blah blah blah</div><br/><br/>
var data = { date: "2009-03-15", data: "Some Data Here" };
</body>
</html>
so, I need to load this data variable in my local page and use it.
I'd prefer to do so with completely client-side code. I figured, if I could get the HTML of this page into a local JavaScript variable, I could parse out the JavaScript code, run eval on it and be good to use the data. So I thought load the remote page in an iframe, but I can't seem to find the iframe in the DOM. Why not?:
<script>
alert(window.parent.frames.length);
alert(document.getElementById('my_frame'));
</script>
<iframe name="my_frame" id='my_frame' style='height:1px; width:1px;' frameBorder=0 src='http://remote.com/data.html'></iframe>
The first alert shows 0, the second null, which makes no sense. How can I get around this problem?
Have you tried switching the order - i.e. iframe first, script next? The script runs before the iframe is inserted into the DOM.
Also, this worked for me in a similar situation: give the iframe an onload handler:
<iframe src="http://example.com/blah" onload="do_some_stuff_with_the_iframe()"></iframe>
Last but not least, pay attention to the cross-site scripting issues - the iframe may be loaded, but your JS may not be allowed to access it.
One option is to use XMLHttpRequest to retrieve the page, although it is apparently only currently being implemented for cross-site requests.
I understand that you might want to make a tool that used the client's internet connection to retrieve the html page (for security or legal reasons), so it is a legitimate hope.
If you do end up needing to do it server-side, then perhaps a simple php page that takes a url as a query and returns a json chunk containing the script in a string. That way if you do find you need to filter out certain websites, you need only do this in one place.
The inevitable problem is that some of the users will be hostile, and they then have a license to abuse what is effectively a javascript proxy. As a result, the safest option may be to do all the processing on the server, and not allow certain javascript function calls (eval, http requests, etc).