Example 4c - Rendering without an IFrame - JSONP-loaded template
Motivation and background
There are many benefits to using an IFrame, and we recommend that you do that by default.
If for some reason you cannot use IFrames, there you can use rendering templates without IFrames too. Just copy the contents of the template into the parent page and combine the two "insertAdSpace" calls like this:
The benefit of using JSONP, is that the file can be loaded from any server on the internet.
Code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<!-- The (invisible) template populated from JSONP data -->
<div id="template" style="display:none">
</div>
<!-- The ads are rendered into this div -->
<div id="target">
</div>
<!-- Ad tag begin -->
<script type="text/javascript">
var gotTemplate = false;
var gotAdData = false;
var adData = undefined;
var adContext = undefined;
var cX = cX || {}; cX.callQueue = cX.callQueue || [];
cX.callQueue.push(['insertAdSpace', {
adSpaceId: '000000005edab0da',
backend: 'sandbox',
sz: '955x150',
width: 955,
height: 150,
renderFunction: function(data, context) {
adData = data;
adContext = context;
gotAdData = true;
checkRender();
}
}]);
function templateCallback(template) {
document.getElementById('template').innerHTML = template;
gotTemplate = true;
checkRender();
}
function checkRender() {
if (gotAdData && gotTemplate) {
cX.renderTemplate('template', 'target', adData, adContext);
}
}
// Async load of template.js
(function(d,s,e,t){e=d.createElement(s);e.type='text/java'+s;e.async='async';
e.src='template.js';
t=d.getElementsByTagName(s)[0];t.parentNode.insertBefore(e,t);})(document,'script');
// Async load of cx.js
(function(d,s,e,t){e=d.createElement(s);e.type='text/java'+s;e.async='async';
e.src='http'+('https:'===location.protocol?'s://s':'://')+'cdn.cxense.com/cx.js';
t=d.getElementsByTagName(s)[0];t.parentNode.insertBefore(e,t);})(document,'script');
</script>
<!-- Ad tag end end -->
</body>
</html>
