Jquery onclick link load url

Question

I can´t get works this with jquery:

<a href="#" onclick='jQuery('#load_url').show(1000).load('http://google.es');'>Google</a>

I need when i do click over this link load the url inside div called #load_url

All time happend the same thing and no load never the url if i test this with one function works but i need works inside link and at the moment i try all kind of things and never get works fine

won't the same origin policy stop you doing this? Don't you need to use something like an iframe? — ᔕᖺᘎᕊ, Jan 03 '15 at 11:59
yes, as previous comment mentioned, you cannot load from external domain — FrEaKmAn, Jan 03 '15 at 11:59
Only i want load url from link and i don´t know how put right — Francisco Gonzalez, Jan 03 '15 at 12:00

score 0 · Answer 1 · answered Jan 03 '15 at 12:01

0

Yes, the problem is the cross-origin policy. I have created a fiddle, it logs the error to the browser console: Cross-Origin request blocked. Any you can't solve this using iframe either, as Google blocks external framing request:

Load denied by X-Frame-Options: 
https://www.google.es/?gws_rd=ssl does not permit cross-origin framing.

answered Jan 03 '15 at 12:01

meskobalazs

15,741
2
40
63

Google it´s only example can be other url the most important it´s if i writte ok this expresion with the link – Francisco Gonzalez Jan 03 '15 at 12:05
Well, most sites disallow cross-origin requests, if the target is your own site (or any other site, where you may change the policy), its okay, otherwise this won't work. – meskobalazs Jan 03 '15 at 12:06

score 0 · Answer 2 · edited May 23 '17 at 12:05

If this is only for testing purposes, you can use this:

function myFunc() {
    
    $.getJSON('http://anyorigin.com/dev/get?url=google.es&callback=?', function(data){
 $('#load_url').show(1000).html(data.contents);
});
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='load_url'></div>

<a href="#" onclick="myFunc()">Google</a>

This uses http://anyorigin.com/ to bypass the Same Origin Policy restriction.

So for using it a few times, this would work, but as it says on the website, too much use can cause you to be banned.

See here for ways to bypass the policy.

If in the real application, you link to a page on your site, you can simply use what you were using before:

<a href="#" onclick="jQuery('#load_url').show(1000).load('localpage.html');">local page</a>

score 0 · Answer 3 · answered Jan 03 '15 at 12:22

Syntaxically your tag is incorrect, your break the main string ; replace the outer quotes by double quotes, and use a local page (create a test.html page in the same directory for example, and try to load this one instead of an external website) :

<a href="#" onclick="jQuery('#load_url').show(1000).load('test.html');">Google</a>

Jquery onclick link load url

3 Answers3