Question

I am looking for information, method or code that can help me solve a unique problem. My first idea was to use iframe, but that seems to be creating possible issues with cross site sharing.

I have a website (https://siteB.com) that I would like to “embed” into other websites. It is written in ASP.net, uses sessions variables, login security, posts messages to social media (FB, Twitter), etc. Any links to social media or through email, post back to siteB.com.

The clients websites would be (http(s)://siteA.com). They are non-profit sites and use a payment gateway for credit card transactions. Because of the nature of the transactions (for tax purposes), the credit card charge must be managed on siteA.com – siteB.com can not collect funds (for this case) and it cannot be a “passthrough” type transaction.

The flow for all users is to go to siteA.com, use the service from embedded siteB.com and make transaction with credit card to siteA.com. siteB.com is where the work gets done, but the payment should be handed off to siteA.com. Overall, the goal is create a seamless experience for the user on siteA.com and their card transaction is to siteA.com.

The problems with iframe:

1. hyperlink from fb/twitter/email, with query string to a specific page on iframed siteB.com not working (or can’t get to work)
2. sharing session data across domains is a problem

Any suggestions are welcome and very much appreciated.

Answer 1

You can use an object:

<object type="text/html" data="http://siteB.com" style="width:100%; height:100%">
<p>backup content in case it doesn't work</p>
</object>

And adjust your height and width accordingly.

Alternatively, you can use jQuery as seen here:

<script>$("#testLoad").load("http://siteB.com/");    
<div id="testLoad"></div>