Embedded Iframe

The embedded iframe theme is designed so you can sell Products on your existing website. You can setup a "site-within-a-site" with pages that host multiple products and regions and also include a navigation menu.

Setting this up requires a bit of preparation on both your MySites site and your existing website.

Step 1. Include "jquery.iframeResizer.min.js" within the JS file of the project needing the IFrame.

https://raw.githubusercontent.com/davidjbradshaw/iframe-resizer/master/js/iframeResizer.contentWindow.min.js

Step 2. Code to be included within the same page as where the <iframe> is placed:
-An example of the IFrame html to use:

-This has to be added to the bottom of the page:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="application/javascript" src="js/plugins/jquery.iframeResizer.min.js"></script>
<script type="text/javascript">

iFrameResize({

log : true, // Enable console logging
enablePublicMethods : true, // Enable methods within iframe hosted page
resizedCallback : function(messageData){ // Callback fn when resize is received
$('p#callback').html(
'<b>Frame ID:</b> ' + messageData.iframe.id +
' <b>Height:</b> ' + messageData.height +
' <b>Width:</b> ' + messageData.width +
' <b>Event type:</b> ' + messageData.type
);
},
messageCallback : function(messageData){ // Callback fn when message is received
$('p#callback').html(
'<b>Frame ID:</b> ' + messageData.iframe.id +
' <b>Message:</b> ' + messageData.message
);
alert(messageData.message);
},
closedCallback : function(id){ // Callback fn when iFrame is closed
$('p#callback').html(
'<b>IFrame (</b>' + id +
'<b>) removed from page.</b>'
);
}
});
</script>

Step 3. Include "jquery.iframeResizer.min.js" within the JS file of the project froducing the content for the IFrame.

Step 4. Code to be included within the page where the <iframe> content is produced:
-Add this to the <HEAD> of the project:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

-This has to be added to the bottom of the page after the content but before the </body> tag:
<script>
var level = document.location.search.replace(/\?/,'') || 0;
$('#nested').attr('href','frame.nested.html?'+(++level));
</script>

https://github.com/davidjbradshaw/iframe-resizer