thanks for reading. I'm trying to come up with a Javascript function that would convert the HTML source of a page at an external URL into a variable, so that the whole thing would become editable. The complication is, the URL does not end with a "html, htm, aspx" extension, but instead with a string of input form variables (i.e. ?type=AAA&color=BBB...). Hence the XMLHttpRequest method is out of the question.
Is this doable in JS/jQuery at all? I've heard about the same origin policy, but the following tool manages to do just that, although in PHP: http://www.iwebtool.com/code_viewer
Same origin policy does apply in this case, however you can do it with a combination of server side code (PHP) and jQuery. Heres a little example.
PHP
<?php
$url = $_REQUEST['url'];
$curl_handle=curl_init();
curl_setopt($curl_handle,CURLOPT_URL,$url);
curl_setopt($curl_handle,CURLOPT_CONNECTTIMEOUT,2);
curl_setopt($curl_handle,CURLOPT_RETURNTRANSFER,1);
$buffer = curl_exec($curl_handle);
curl_close($curl_handle);
echo($buffer);
?>
jQuery / HTML
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$.ajax({
type: "POST",
url: "yourPhpScript.php",
data: "url=http://stackoverflow.com"
}).done(function( content ) {
$('#content').html(content);
//content is your variable containing the source
});
</script>
<div id="content"></div>
XMLHttpRequest works with any valid url, just give it the appropriate url and you can get the response as text.
However, there is the restriction of the same-origin policy. There are different workarounds to this for different situations, but if you want to be able to manipulate the text you receive then there is really only one option. Use the same javascript as you currently have, just add this as the first line of getUrl:
url='/path/to/proxy.php?url='+encodeURIComponent(url);
Then, on your server (the same one that's serving the page and its javascript), write proxy.php:
<?php
echo file_get_contents($_GET['url']);
?>
This will make every ajax request you make go to your server, which does not have the restriction of loading from only one domain. The server will load the url you asked for, and reply to you with the response it got from the page it loaded. Note that the above script will only give you the content body (what you see when you view-source) - if you need to access HTTP headers you can relay those too, it will just be more complicated.
Related
How can I get a html element from another website directly into my site (not using an iframe).
For Example:
A page on another website has the following code (and nothing else);
<p>example text</p>
how can I get this into my website to be able to edit it. I can't directly copy the code because I want the code on my site to change in conjunction to the other site.
As you seem to have PHP tag, so if using PHP, you can use file_get_contents(), like
$html = file_get_contents('url_of_site/page.html');
or with DOMDocument, like:
$doc = new DOMDocument();
$doc->loadHTMLFile('http://some_site.com/');
$html = $doc->getElementsByTagName('p');
print_r($html);
Note:: Due to Same Origin Policy, you cant do it with just javascript. If you want to do it with Javascript you need to create a proxy kinda stuff, like have a test.php file in your own server, add code to fetch content from other site into test.php file, and call this test.php file using javascript ajax.
I made a theme for tumblr and I want to release the code to the public. The thing is, want to know how many people are using my theme. Is there any javascript or other solution to this other than google analytic?
Yes, add to your code some javascript that sends a GET request to a php page that logs the request. You need to grab the tumblr document.URL when you do this.
<script type="text/javascript">
xmlHttp.open( "GET", '//mywebsite.com/tumblr_code_check.php?referrer='+document.URL, true );
xmlHttp.send( null );
</script>
PHP:
<?php
$referrer = $_GET['referrer'];
$file = '';
$filename = 'tumblr_refferalls.txt';
$file = file_get_contents ($filename);
file_put_contents ($filename, $referrer."\n");
?>
Then check the file tumblr_refferalls.txt. You can add some code to the php page ignore your own website, to prevent it from filling up.
Please note that anyone can remove the javascript from your code.
You can get more detailed, such as adding a timestamp, filtering it so you only get the page URL once appended to your logfile, have it send you a text message or email when someone new uses your code, etc.
Use a tracking pixel, a 1x1 image and just include it in the markup. Of course any end-user is free to remove it. I urge you to refrain from other methods, as you will not only raise red flags with anybody who looks into your theme, but you may negatively impact their PHP or JS execution should your host ever fail to connect.
Created javascript widget. Testing on my own domain and its working fine. However when posting on a 3rd party site it looks like it's not connecting to the database and getting the data.
Here is the part of the js file where I get the data:
/******* Load HTML *******/
var jsonp_url = "http://www.example.com/widget/data.php";
$.getJSON(jsonp_url, function(data) {
When I test on example.com everything is fine. I set the permissions on data.php to 777 and it still isn't working. Please help!
you cannot make an ajax call across different domains:
let's say your domain is 'example.com', and the third party site has 'thirdparty.com'. you install the widget on thirdparty.com. The widget code on thirdparty.com will try to make an ajax request to 'example.com'. Which is forbidden by the browser.
You can always replace the ajax call with a straight < script > tag. This doesn't have any restriction.
Hope it helps
You have a variable called jsonp_url, but the URL you use doesn't include the string callback=? which the documentation says triggers jsonp mode.
You need to include that in the URL and make sure that your server side script is outputting JSONP (using $_GET['callback'] (with suitable sanitisation) to determine the function name you wrap the JSON in).
they need to enable cross orgin resource sharing. http://enable-cors.org/
Hi
Is it possible to load an XML file from a domain that differs from scripts domain with pure javascript and without using a php/asp/jsp/... script as proxy?
Something like xmlHttpRequest but with ability to manage cross domain requests.
Thanks
You can use something called JSONP. I know the name sucks, because it's not really related to JSON. But this requires you have control over the other domain. You need to wrap your XML inside a function call, or assign it to a javascript variable:
func('<xml></xml>');
or
var myxml = '<xml></xml>';
So if your other domain returns one of these two formats, you can use the <script src="http://otherdomain/yourjsonp"></script> syntax in your html to load that data in JavaScript. It's a little hacky but a lot of people use it.
It is possible with yql! (Yahoo did it for you)
Go to this site and simple at the "select from url='xxx' " replace the xxx with your xml url. Use the url created at the text box below and do a simple xmlrequest. You won't have any cross-domain prolems
I've just starting learning jQuery and AJAX. I'm able to load a local page (on my disk) into a div via jQuery.load(), but external sites don't seem to work. I've even used wireshark to check if the data is being sent from the server (it is). Sample code is below:
<html>
<head>
<script src='jquery-1.4.2.min.js'></script>
<script>
$(document).ready(function() {
// $('#test').load('localpage.htm'); works!
$('#test').load('http://www.google.com/'); // does not work!
});
</script>
</head>
<body>
<div id='test'></div>
</body>
</html>
Is it possible to do this in the first place? If so, how?
You cannot do ajax calls to a different domain than the script originates from.
For doing such a thing, you have to use a proxy page on your own page, eg:
<script>
$(document).ready(function() {
$('#test').load('ajax/getgoogle.php');
});
</script>
getgoogle.php:
<?php
echo file_get_contents("http://www.google.com/");
?>
Out of the box: no. It's a security issue. There are a few different workarounds though.
You're running into the Same Origin Policy. You can't access data from an external domain using AJAX, it's considered a security risk. The reasoning behind it is that AJAX requests work with cookies stored by the browser -- if I tried to access facebook.com, and you were logged in there, the cookie would be sent and I'd have access to your personal data.
For security reasons, you cannot use AJAX to request a page from a different domain (or protocol or port).
Instead, you can write a server-side script on your server to forward requests to another domain. (This is not possible if you're running a page from a file:// url)
Ajax? Yes. XHR? No (unless the browser implements Cross-site XHR which isn't widespread yet).
To get the data with Ajax without using XHR the external site must provide the data in the JSONP format.
Alternatively, you can proxy the data through a server side script on your server, thus making it come from the same host (as far as JavaScript is concerned).
No, it's not. Have a look at Same Origin Policy. The site you are trying to request would need to have JSONP enabled for that to work, and you would utilize a cross-domain callback. Alternatively, you could create a proxy on your own domain which grabs the page on behalf of your ajax request.
Load this PHP script instead of trying to load website directly
$filename = "http://www.sitename.com";
$handle = fopen($filename, "r");
if ($handle)
{
while (!feof($handle))
{
$text .= fread($handle, 128);
}
fclose($handle);
}
print $text;
Edit: Or simply like henchman's solution with file_get_contents
You can't call Ajax from another domain. Check JSON technique for this