3

My project is to have preview of some websites inside my website, I'm using Iframe for now to load the website preview and then the user can interact within the Iframe.

I have to change the Iframe implementation to be within the page For SEO purpose, So what could be the replacement is Jquery .load() function.

$('div#websitePreview').load('Website_URL');

but the problem is when the user interact with the website (click some link) the whole page will redirect to the new link, so is there a way to load the page which been clicked by the user in the same div by ajax call without leaving my website?

UPDATE: The websites I'm going to preview have subdomains of my original site

1
  • can you show your HTML code ? Commented Jun 24, 2013 at 8:41

3 Answers 3

3

There is no way to achieve this, due cross domain security restrictions in modern browsers. You aren't allowed to access other domains content via ajax.

The other point is, that you may have css bugs if you load an entry page in a div on your site, because the loaded css will override your site's css.

Sign up to request clarification or add additional context in comments.

2 Comments

The websites I'm going to preview have subdomains of my original site, sorry i should mention that earlier
Sure you can cross domains, if the server supports CORS.
1

Assuming the websites you are 'previewing' are on the same domain as your website, you can amend every a tag within the loaded div to perform an AJAX request with the following code:

var $container = $('#websitePreview')
$container.load('http://www.example.com'); // initial load

// link click within loaded content.
$container.on('click', 'a', function(e) {
    e.preventDefault();
    $container.load($(this).attr('href'));
});

On the other hand, if the previewed sites are on separate domains, you cannot load HTML from them due to the Same Origin Policy. An iframe or CORS request is your only option in those situations, and if the url is 3rd party, the latter is extremely unlikely to happen.

Comments

0

try

$('div#websitePreview a').live('click', function(event){
   event.preventDefault();
   var url = $(this).attr('href');
   $('div#websitePreview').load(url);
}

1 Comment

live is no longer part of jQuery and should not be used. delegate or on with a delegated event handler should be used instead.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.