After seeing many questions about how jQuery.load() handles tags in the content to be loaded, I see that jQuery strips out inline tags. But, I'd like to use Kontactr for the contact page in my site, and the much nicer AJAX embed they have is two script tags as in the code examples below. How can I work around the jQuery.load() constraints to make these script tags run in the jQuery.load(file, callback()) callback() function?
index.html
<html>
<head>
<!--include css, jquery, scripts -->
<script type="text/javascript">
$(document).ready(function() {
$('#main_content').load('contact.html #main_content', function(){
//what can I put here to run the Kontactr inline script code
//when contact.html is loaded?
});
});
</script>
</head>
<body>
<div id="main_content"><!--content will load here--></div>
</body>
</html>
contact.html
<div id="main_content">
<h1>Please Contact Us With The Form Below</h1>
<!-- jQuery.load will strip out these script tags
and the form will not be embedded. -->
<script type="text/javascript"> id = 1; </script>
<script type="text/javascript" src="http://kontactr.com/wp.js"></script>
</div>
I've thought maybe I can put a <div id="contact_form"/>
in contact.html and then maybe eval the script tags in the callback function inside of
$('#contact_form').html(//eval script tags result here);
, but I'm not sure how to do that syntactically.
So, in case anyone else runs into this issue, there's a pretty simple solution.
That http://kontactr.com/wp.js script just document.write()s an iframe to the page. What I wound up doing was this:
<div id="main_content">
<h1>Please Contact Us With The Form Below</h1>
<center>
<iframe id="kontactr-iframe" src="http://kontactr.com/w.php?id=1&referrer=http://www.theurlyourrequestingfrom.com&color=000000-FFFFFF-000000-FFFFFF" width="475px" height="475px" frameborder="0"></iframe>
</center>
</div>
It works like a charm.
Notes: The color
argument is optional, and the id
argument is specific to your Kontactr account. The referrer
argument is populated with window.top.location.href
in the http://kontactr.com/wp.js script. I just put the URL of the $.load() page there.