safeframe
Version:
SafeFrame provides a consistent JS API to include 3rd party content
235 lines (190 loc) • 5.38 kB
HTML
<html>
<head>
<title>Safe Frame Config and Callback Tests</title>
<script type="text/javascript" src="../src/js/lib/base.js"></script>
<script type="text/javascript" src="../src/js/host/host.js"></script>
<script type="text/javascript" src="../src/js/lib/boot.js"></script>
<style type="text/css">
#log{
width:310px;
height: 250px;
overflow:auto;
border: 2px solid green;
background:black;
border-radius: 4px;
color: green;
font-family: courier;
}
.logWrapper{
position:relative;
width:315px;
float:right;
}
</style>
</head>
<body>
<h1>Safe Frame Config and Callback Tests</h1>
<div class="logWrapper">
<div id="log"></div>
<button onclick="document.getElementById('log').innerHTML='';">Clear</button>
</div>
<div id="label_input" style="font-weight:bold;font-family:arial;">HTML Input: </div>
<textarea id="html_input" style="width:640px;height:280px;"></textarea>
<table cellspacing="0" border="0" cellpadding="0" style="height:auto;table-layout:fixed">
<tr>
<td></td>
<td style="width:90%;vertical-align:top;white-space:nowrap;">
<span id="label_width" style="font-weight:bold;font-family:arial;">Width: </span><input id="width_input" type="text" style="width:50px;font-family:sans-serif;font-size:9px" value="350" />
<span id="label_height" style="font-weight:bold;font-family:arial;">Height: </span><input id="height_input" type="text" style="width:50px;font-family:sans-serif;font-size:9px" value="350" />
<button onclick="render_input()">Render Input</button> | <button onclick="$sf.host.nuke()">Remove</button>
</td>
</tr>
</table>
<hr />
<!-- a second ad -->
<div id="leftAdPlacement" class="adBg"></div>
<!-- a second ad -->
<div style="position:relative;margin:0px;width:100%;right:auto;top:auto;left:auto;margin-left:auto;margin-right:auto;text-align:center;width:100%;">
<div style="display:inline-block">
<div id="tgtLREC"></div>
</div>
</div>
<script type='text/x-safeframe' class='sf_data'>
{
"id": "leftSkyscraperAdFrame",
"src": "../../tests/sample_ads/adBootstrap.js?flashVer=${flash_ver}",
"conf":
{
"w": 360,
"h": 600,
"dest": "leftAdPlacement",
"supports" : {
"exp-push" : "1",
"read-cookie" : "1",
"write-cookie" : "1"
}
},
"meta":
{
"expand":
{
"x": "450",
"y": "0"
}
}
}
</script>
<script type="text/javascript">
function logEntry(msg){
var l = document.getElementById("log");
l.innerHTML += "<br/>" + msg;
}
/**
* Host Callback posMsg
*/
function posMsgCallback(id, message, data){
var msg = "posMsgCalled from " + id + " on event " + message;
if(data){
msg += " WITH DATA: " + data;
}
logEntry(msg);
}
/**
* Host Callback beforePosMes
*/
function beforePosMsgCallback(id, message, data){
logEntry("beforePosMsgCalled");
}
/**
* Host Callback startPosRender
*/
function onStartPosRenderCallback(id){
logEntry("onStartPosRenderCallback " + id);
}
/**
* Host Callback endPosRender
*/
function onEndPosRenderCallback(id){
logEntry("onEndPosRenderCallback " + id);
}
/**
* Host Callback onFail
*/
function onFailureCallback(id){
logEntry("onEndPosRenderCallback " + id);
}
/**
* Initialize the position config object for safe frame
*/
function initSfPosition(positionId, content, w, h){
var posConf, pos, opts;
opts = {
id:positionId,
w:w,
h:h,
dest:"tgtLREC"
};
posConf = new $sf.host.PosConfig(opts);
pos = new $sf.host.Position(positionId, content);
return pos;
}
function render_input()
{
var el, val, w, h, html, posID;
$sf.host.nuke();
el = $sf.lib.dom.elt("html_input");
val = (el && el.value) || "";
val = $sf.lib.lang.trim(val);
if (!val) {
alert("No HTML specified");
return;
}
html = val;
el = $sf.lib.dom.elt("width_input");
val = (el && el.value) || "";
val = $sf.lib.lang.cnum(val,0);
if (val <= 0) {
alert("Width must be a valid number from 1 to 9999 pixels");
return;
}
w = val;
el = $sf.lib.dom.elt("height_input");
val = (el && el.value) || "";
val = $sf.lib.lang.cnum(val,0);
if (val <= 0) {
alert("Height must be a valid number from 1 to 9999 pixels");
return;
}
h = val;
posID = "test_" + w + "x" + h;
pos = initSfPosition(posID, html, w, h);
$sf.host.render(pos);
}
/* render some sample content */
// renderFile: "http://10.72.227.43/iab/safeframes/src/html/r.html",
(function() {
var conf = new $sf.host.Config({
renderFile: "../src/html/r.html",
positions:
{
"LREC":
{
id: "LREC",
dest: "tgtLREC",
w: 300,
h: 250
}
},
onPosMsg: posMsgCallback,
onBeforePosMsg: beforePosMsgCallback,
onStartPosRender: onStartPosRenderCallback,
onEndPosRender: onEndPosRenderCallback,
onFailure: onFailureCallback
});
var posMeta = new $sf.host.PosMeta(null,"rmx",{foo:"bar",bar:"foo"});
var pos = new $sf.host.Position("LREC", "<h1>Hello World Sean</h1>", posMeta);
$sf.host.render(pos);
})();
</script>
</body>
</html>