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
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.
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.
try
$('div#websitePreview a').live('click', function(event){
event.preventDefault();
var url = $(this).attr('href');
$('div#websitePreview').load(url);
}
Related
Currently I've got a website with an iframe loaded from another site into my website. The loaded iframed site requires a button, which has an id called 'accept', to be clicked. (cookies)
Of course the user should not click this button twice, so I want to click this button automatically once MY page is loaded.
Problem:
The loaded iframe from the other site has no ID neither NAME tag.
How can I click this button on page load?
Code which I've tried, but does not work:
<script type="text/javascript">
$(document).ready(function(){
$("#accept").click();
});
</script>
I've readed on the internet it's possible to listen to an iframe without an ID. But I have no clue on how to write this into code.
I've been searching google the whole day. I can't get a solution.
Hopefully someone can help me on my encountered problem. A fixed code with explaination/documentation would do it for me.
Best regards.
You can listen to the load event of an iframe. I suppose there is only one iframe in your HTML page, so the following can work without any issue:
$(function() {
$('iframe').load(function() {
$('iframe').contents().find('#accept').click();
});
});
Note that you need to access the contents of the iframe using contents() method.
It's not really a solution, but it's an answer on my question:
SecurityError: Blocked a frame with origin from accessing a cross-origin frame
You can't access an with Javascript, it would be a huge
security flaw if you could do it. For the same-origin policy browsers
block scripts trying to access a frame with a different origin.
I wrote a chrome extension which injects a toolbar on top of sites (say amazon.com) as an iframe at the top.
When the user click on the action button on the toolbar (inside iframe), it's basically a form submit action, with action pointing to my full site (on another domain).
It's working, however only inside the iframe. I'd like the whole page to redirect to my site, rather than the iframe.
Is there anyway to do that in extension?
If you are using an iframe :
Same Origin Policy prevents you from doing this.
Unless you can hack/XSS the other site's files to inject the JS, you will have a hard time.
Now if you legitimately need to communicate with the other page, and you either have control of the other page or can setup it to communicate with your server, you can use window.postMessage, JSONP or even Ajax with CORS (latter 2 will be harder to pass dynamic content though). But I believe it is not the case.
else :
you can directly inject the js script in to the page itself by that you can handle all operations in the main page same as running something on chrome console.
I'm developing an application in which I have internal and external links. i noticed that Jquery mobile does not load the spinner when an external link is clicked:
Example
Spinner is shown
Spinner is NOT shown
I have tried :
$('a[href][rel=external]').click(function(){ //doesnt work
$.mobile.showPageLoadingMsg();
}
and:
$('a[href][rel=external]').click(function(){
// shows the spinner but it gets stuck forever
$.mobile.showPageLoadingMsg();
$('#loadingDiv').div("refresh");
}
can someone help me show the spinner when the rel = external links are clicked?
http://jquerymobile.com/test/docs/pages/page-links.html
Links that point to other domains or that have rel="external",
data-ajax="false" or target attributes will not be loaded with Ajax.
Instead, these links will cause a full page refresh with no animated
transition. Both attributes (rel="external" and data-ajax="false")
have the same effect, but a different semantic meaning: rel="external"
should be used when linking to another site or domain, while
data-ajax="false" is useful for simply opting a page within your
domain from being loaded via Ajax. Because of security restrictions,
the framework always opts links to external domains out of the Ajax
behavior.
You wouldn't get a loading spinner as it is just going to do a page redirect. Also for your jsfiddle, google.com will not work as they don't allow iframe access. If you change it to another site like http://jsfiddle.net it will switch the site properly.
If you MUST show the spinner, you can do something like this
http://jsfiddle.net/RqkYM/10/
$('a[href][rel=external]').click(function(e){
e.preventDefault();
e.stopPropagation();
$.mobile.showPageLoadingMsg();
window.location = $(this).attr('href');
});
It will display the spinner then do a redirect
If you want, you could load the external page with $.mobile.changePage() See here for docs
It has a showLoadMsg option that "Decides whether or not to show the loading message when loading external pages."
EDIT:
Here is an example of loading an external page like I described:
http://jsfiddle.net/KYvDv/2/
$.mobile.changePage( "/gQxCN/1/show/", {
showLoadMsg: true
});
I have a page with one button. When clicked, that button navigates to http://google.com/
$("#button").click(function(){
window.location="http://google.com";
});
I would like this navigation to work when this page is embedded within the iframe. I don't want to affect the outside host page, but rather only the contents of the iframe. What's a good cross-platform way to:
Detect if I'm contained in an iframe
If not, navigate like above.
If yes, navigate the iframe only?
(I'm going to try to implement the algorithm I just described, but regardless I think this question is interesting enough to be posted. If I succeed, I'll post my solution)
1) Detect if I'm contained in an iframe
if (window != window.top) {
// the page is inside an iframe
}
2) If not, navigate like above.
navigate like above
3) If yes, navigate the iframe only?
When you write window.location.href = 'http://www.google.com'; you are navigating the contents of the iframe, not that of the top page. If you want to navigate the top page, you can only do this if this top page is on the same domain as the iframe and you could use window.top.location.href.
UPDATE:
There is a security mechanism built in browsers which forbid you from redirecting to sites that set the X-Frame-Options: SAMEORIGIN response header when inside an iframe. That's the case with http://www.google.com. Simply navigate to this site and look at the response HTTP headers with FireBug or developer toolbar you are using and you will see this header. You cannot redirect to it and you will get the following error message:
Refused to display document because display forbidden by X-Frame-Options.
It's basically a security mechanism implemented by some sites whose authors didn't want you to embed them in an iframe.
I am using an iframe to embed content from another site. The button in the iframe opens an overlay with a form. The problem is when the button is clicked, the overlay does not open fully. The problem is not from the overlay but from the iframe and parent.
The site i am testing on is at www.sycotickets.com/form.php. you can check it and click on the button at the bottom to see the problem. I also learnt javascript can be used to embed. Can anyone please pint me in the right direction on both issues?
There are 2 possible answers when using AJAX to load page content from a different server
1) Both servers are in a similar domain (s1.example.com, s2.example.com) in which case, you can set the domain to simply be example.com which allows full functionality withing AJAX calls.
2) Servers are on completely different domain - The server which provides the content (currently for the IFrame) must provide the data using the JSONP protocol (note the P!) this means the resulting data is loaded into a script tag which then executes. The data itself contains a JS function call eg:
{data: '<pre>Some Html</pre>'}
is actually returned as:
function SomeFuncNameSpecifiedInTheRequest({data: '<pre>Some Html</pre>'});
Instead of doing an AJAX call, you dynamically add a script tag to the page, something like:
<script type="text/javascript" src="http:/www.example.com/GetMyData.php?WrapperFunction=SomeFuncNameSpecifiedInTheRequest">
You then implement SomeFuncNameSpecifiedInTheRequest on your page and process the results when it's called. JQuery implements this functionality for you automatically (at least the client-side bit.)
See here for more information on JSONP and here for more information on setting the domain
Nothing you can do really. If it's loading from an external site browsers prevent you as a developer from accessing other sites and modifying them to try and prevent XSS attacks. You could try to fake it by moving the iframe where you want it dynamically and overlaying the black on click on your end... but that seems pretty kludgy...