dangerouse/child.html

## child.html
<!DOCTYPE HTML>
<html>
  <body>
    <h2>IFrame Import Child Page</h2>

    <!--
      Create a custom link to start the import process
      -->
    <a href="#" onclick="return parent.cloudsponge.launch();">
      Add from Address Book
    </a>

    <!--
      This textarea will be populated with the contacts returned by CloudSponge
      -->
    <textarea id="contact_list"></textarea>

  </body>
</html>

## parent.html
<!DOCTYPE HTML>
<html>
  <head>
  <!--
    Include the script anywhere on your page, usually in the head
      (don't forget to replace `localhost-only` with your CloudSponge key)
    -->
  <script src="//api.cloudsponge.com/widget/localhost-only.js"></script>
</head>
  <body>
    <h2>IFrame Import Parent Page</h2>

    <!-- The iframe that may be a lightbox to host the link to launch the CloudSponge widget -->
    <!-- child.html refers to the child example below -->
    <iframe id="ab" width="800" height="600" src="child.html"></iframe>

    <script>
    // The widget initialization needs to be on the parent frame so
    // that the widget can overlay the entire page
    cloudsponge.init({
      // this callback handles converting the array of contacts retuned into a
      // comma separated list of email addresses.
      afterSubmitContacts:function(array_of_contacts) {
        var contacts_display_string = [],
            textarea = null,
            contact = null;
        if (window.frames['ab'] && window.frames['ab'].document) {
          textarea = window.frames['ab'].document.getElementById('contact_list');
          if (textarea) {
              contact = array_of_contacts[i];
              contacts_display_string.push(contact.primaryEmail());
            }
            textarea.value = contacts_display_string.join(', ');
          }
        }
      }
    });
    </script>
  </body>
</html>
	<!DOCTYPE HTML>
	<html>
	<body>
	<h2>IFrame Import Child Page</h2>

	<!--
	Create a custom link to start the import process
	-->
	<a href="#" onclick="return parent.cloudsponge.launch();">
	Add from Address Book
	</a>

	<!--
	This textarea will be populated with the contacts returned by CloudSponge
	-->
	<textarea id="contact_list"></textarea>

	</body>
	</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<!--
	Include the script anywhere on your page, usually in the head
	(don't forget to replace `localhost-only` with your CloudSponge key)
	-->
	<script src="//api.cloudsponge.com/widget/localhost-only.js"></script>
	</head>
	<body>
	<h2>IFrame Import Parent Page</h2>

	<!-- The iframe that may be a lightbox to host the link to launch the CloudSponge widget -->
	<!-- child.html refers to the child example below -->
	<iframe id="ab" width="800" height="600" src="child.html"></iframe>

	<script>
	// The widget initialization needs to be on the parent frame so
	// that the widget can overlay the entire page
	cloudsponge.init({
	// this callback handles converting the array of contacts retuned into a
	// comma separated list of email addresses.
	afterSubmitContacts:function(array_of_contacts) {
	var contacts_display_string = [],
	textarea = null,
	contact = null;
	if (window.frames['ab'] && window.frames['ab'].document) {
	textarea = window.frames['ab'].document.getElementById('contact_list');
	if (textarea) {
	contact = array_of_contacts[i];
	contacts_display_string.push(contact.primaryEmail());
	}
	textarea.value = contacts_display_string.join(', ');
	}
	}
	}
	});
	</script>
	</body>
	</html>