This question already has answers here:
Javascript back button for iframe parent window
(2 answers)
Closed 9 years ago.
I want to embed some third party content which will be an html page, inside my html website. I thought of using the iframe approach in which i will embed the third party html page inside my website as an iframe.
The motivation behind using iframes was that i dont know what libraries they might use, or what CSS they might write. I wanted their logic to be separate from mine. Iframe fulfills my this wish.
But now i have a problem, if i want the browser Back/Next Functionality for any navigation's inside the iframe, it will be very difficult to maintain because of the route. At the same time, maintaining the iframe state when the parent page is refreshed will be pretty tough.
So, is the iframe approach fine first of all? If it is, then how do i cater to the Browser Back/Next?
Well, you can manage back/forward button with JavaScript like this:
iframe.contentWindow.history.back();
iframe.contentWindow.history.forward();
Bigger problem is that included page can disallow possibility to be included into iframe (if you include page with this behaviour into iframe, it will load over your page - check for example this qeustion).
Related
This question already has answers here:
Overcoming "Display forbidden by X-Frame-Options"
(27 answers)
Closed 3 years ago.
I'm trying to build a webpage with the following specs:
A list of buttons on top
An area underneath the buttons where other websites can render
When a button is pushed, the area renders a different website
Seems pretty simple. So I built this with a few JS buttons on top and an iFrame below it. When I receive an onClick, I simply change the src attribute on the iFrame.
This works very well. Until... I try to put Google into the iFrame. Google refuses because it sets 'X-Frame-Options' to 'SAMEORIGIN'.
I fully understand what's happening here and more importantly, why it happens. But I still need to build this page.
Is there any way to get what I want without resorting to things that makes it look like I'm doing something unsavory? And yes, I realize I'm sort of duplicating the functionality of a browser window with a list of bookmarks, but I need things to look and operate in a certain way.
You could offer a search box and a submit button on a custom 'google' page which your iframe looks at (just a local script) and send the user to a new tab with that search automatically entered into Google. You cannot gleam anything from the iframe anyway so this wouldn't take away from your ability to do anything (other than keep the user on your tab), but if they're going to Google, you just don't have the choice.
does anybody know how can I expand javascript so that it targets whole website not only the page in iframe it is on. Im currently using a javascript for gallery on my website, so when you click on a picture it pops up enlarged, however since the page with javascript is in an iframe it shows only in the iframe, how can I accomplish the pop up to expand to the whole page?
Thanks in advance.
Iframes can call out to the window which embeds them using simple javascript (see window.frames on http://www.w3schools.com/jsref/prop_win_frames.asp). However, if src of the iframe is on a different domain, then the script can only affect the iframe, due to security policy within the browser.
If you'd like to apply a work-around, there are some solutions like this: Yet Another cross-domain iframe resize Q&A
These solutions tend to break on different browsers and with updates to browsers.
Your best bet is keeping the entire iframe contents within the browser by writing the iframe code yourself (and hosting on your own domain).
I have a parent page that contains iframe , the parent page doesnt have anything except the iframe and a widget that needs to be there as the user navigates the website.
What I want to do is: Whenever the iframe changes to a new location, I want the parent page to change the address so it can be bookmarked.
Also, how the links inside iframe be written ?
I've tried History.js plugin that uses HTML5 state, but I don't know how to apply it to my use case. It just shows ajax examples.
Can't you get rid of the iframe all together? They aren't very popular, and this exact question is being asked quite alot and also ignored a lot.
Found this on page 2 f googling 'bookmark site inside iframe'
http://matthewmanela.com/blog/making-linking-between-anchors-in-an-iframe-work-in-firefox-11-and-above/
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Modify the URL without reloading the page
I just came across this site, http://www.so-design.co.uk/#/brand/1 , if you use the slider it changes the image just like any normal image slider but it also changes the url to /brand/1, /brand/2 ect which i suppose means that all the slides and their content are crawled by search engines as individual pages
any ideas how they are doing this ?
cheers
You might want to take a look at manipulating the browser's history as well as the history property. Also, reading the hash usingwindow.location.hash
First thing to do when you want to try and work out how a website has been developed is to view the source code.
The quickest way to do this is to right-click the page and look for "View page source" or something similar (depending on your browser)
Of course, in this instance, when you right-click it should become obvious that the website uses Adobe Flash. Therefore, this is not a typical JavaScript slider as you first seemed to assume.
I was studying how Disqus and other embedded wigets are implemented, and I came to realize that they don't use an enclosing iframe where all their widget is run. What they do is to append elements dynamically to the embedding page through JavaScipt and then run almost every form or button in some iframe. What's the point of doing this? Couldn't they just wrap everything in an iframe and then change the parent window URL (to allow navigation) through some kind of cross-domain messaging system such as easyXDM? Can anybody point out some benefits that arise from having some elements not inside an iframe?
Code inside an iframe may not be able to set cookies as browser thinks it is an advertisement.
Iframe content cannot control the size of the outside iframe, so iframe needs to be created with javascript and javascript needs to be loaded externally so that external site has total over iframe size.