15-07-2012, 03:37
Nie do końca o to mi chodziło, gdyż chcę wyświetlić sobie stronę, któa jest lokalnie (http://192.168.0.180/1.html). Znalazłem w internecie kod wykorzystujący YQL do wyświetlania stron z innych serwerów, ale niestety nie obsługuje on stron lokalnych :/. Jak to przerobić/zmienić ?
jquery.xdomainajax.js
main.js
index.html
jquery.xdomainajax.js
Kod:
/**
* jQuery.ajax mid - CROSS DOMAIN AJAX
* ---
* @author James Padolsey (http://james.padolsey.com)
* @version 0.11
* @updated 12-JAN-10
* ---
* Note: Read the README!
* ---
* @info http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/
*/
jQuery.ajax = (function(_ajax){
var protocol = location.protocol,
hostname = location.hostname,
exRegex = RegExp(protocol + '//' + hostname),
YQL = 'http' + (/^https/.test(protocol)?'s':'') + '://query.yahooapis.com/v1/public/yql?callback=?',
query = 'select * from html where url="{URL}" and xpath="*"';
function isExternal(url) {
return !exRegex.test(url) && /:\/\//.test(url);
}
return function(o) {
var url = o.url;
if ( /get/i.test(o.type) && !/json/i.test(o.dataType) && isExternal(url) ) {
// Manipulate options so that JSONP-x request is made to YQL
o.url = YQL;
o.dataType = 'json';
o.data = {
q: query.replace(
'{URL}',
url + (o.data ?
(/\?/.test(url) ? '&' : '?') + jQuery.param(o.data)
: '')
),
format: 'xml'
};
// Since it's a JSONP request
// complete === success
if (!o.success && o.complete) {
o.success = o.complete;
delete o.complete;
}
o.success = (function(_success){
return function(data) {
if (_success) {
// Fake XHR callback.
_success.call(this, {
responseText: data.results[0]
// YQL screws with <script>s
// Get rid of them
.replace(/<script[^>]+?\/>|<script(.|\s)*?\/script>/gi, '')
}, 'success');
}
};
})(o.success);
}
return _ajax.apply(this, arguments);
};
})(jQuery.ajax);main.js
Kod:
$(document).ready(function() {
$.get('http://192.168.0.180/1.html', function(res) { //get the html source of this website
$(res.responseText).find('div').each(function() { //loop though all h3 in the snippets list
var anchor2 = $(this).children('input'); //get the actual link with the text inside
jQuery('<d/>', { //build a li element
html: jQuery('<a/>', { //with a A element inside it
href: #', //set the href for the link
text: anchor2.attr('value'), //and the text
class: anchor2.attr('class'),
})
}).appendTo($('#jquery_snippets')); //append it to a list
});
$('#jquery_snippets p').remove(); //remove this first li ("Loading...") when done
});
});index.html
Kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Cross-Domain Ajax Demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.xdomainajax.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div id="wrapper">
<p>
Fragmenty:
<div id="jquery_snippets" style="font-size: 20px;">
<p style="font-size: 12px;">Loading...</p>
</div>
</p>
</div>
</body>
</html>
