I have a fully functional website that allows my customers to login, answer some questions, receive a parts list, and get a quote. I have constructed this website in such a way that when a user is not logged in, or logged in as a standard web user, the website looks like this. There is a header, navigation menu, and search box.
When a user logs in as an "Embedded User" that notifies the site to hide all of that information, showing only the maroon box with the category/system selectors and the content underneath it for the purposes of allowing the page to be easily embedded into a customer's existing website.
The framed site gets the customer's account from the IFrame's source URL, and matches it against my database to ensure the request is coming from the right domain.
http://www.alphacommunications.com/alphaquote/?account=XYZ123
I immediately went the iFrame route to begin with. I created a test customer page on alphacommunications.com that had an iframe. I changed the JS code in the framed page to resize the parent iFrame any time the content changed, as the content can from 60 pixels to 3000 pixels high. This worked very well, actually.
Then I took it a step further. I set up a test page on my personal website (same server, different domain) and I started getting security errors in Chrome. The frame resizing no longer worked.
The issue is that I really need this embedded object to resize itself to it's contained content. I guess I am looking for advice on how to set this whole thing up so I can provide my customers with an embeddable system with minimal coding on their part. As of right now, my code is very simple.
<html>
<head></head>
<body>
<iframe id="aqFrameSlider" style="width:915px; height:775px; border:none;" src="http://www.alphacommunications.com/alphaquote/?account=XYZ123"></iframe>
</body>
</html>
Any guidance in this matter would be most appreciated.