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.