I just had this awesome idea about simulating a single page application using iframes. I am using a framework that uses layouts to display pages. Luckily I can use an empty layout (meaning it has no extra elements apart from the mandatory html tags) to display only the page body inside an iframe once the page has loaded with the original layout.
I think this may have come out a little confusing so basically this is my idea:
User opens up the site, site loads the main layout with the header and navigation and everything. Then the body of the layout is displayed inside an iframe which is getting its content from the same url using the same page but a different layout (empty one).
The problem – how can I differentiate between whether it is an initial request coming in or just another page request?
The solution – If I could somehow detect requests coming from iframes I could simply know when to use the main layout or the empty layout. Is there any way I can detect requests sent from iframes?
I also thought I could have special links for loading page content such as if a user opens the page http://example.com/products then I would return the main layout and in the iframe I would send a request to http://example.com/empty/products. But then I will have to modify all links in all pages to contain /empty/ in them or I will have the main layout appear inside the body of the original request.
You can’t detect that an iFrame is making the request directly. You can, of course, pass parameters in the URL to allow you to make the distinction.
Since the use of iFrames is downplayed, if not actively deprecated, you may want to revisit your idea.
You need to set CORS headers and disallow cross-domain requests. This might help you: https://stackoverflow.com/questions/6347881/how-to-prevent-cross-domain-ajax-requests