safeframe
Version:
SafeFrame provides a consistent JS API to include 3rd party content
211 lines (152 loc) • 4.59 kB
HTML
<html>
<head>
<title>Safe Frame using Scripts</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>
</head>
<body>
<div id="top_leaderboard" style="height:90px;"></div>
<h1>Safe Frames Tag Sample</h1>
<button onclick="alert('Tags rendered with auto bootstrapper already - \nView renderTags() method to see explicit call.')">Render Tags</button>
<button onclick="nukePositions()">Nuke Positions</button>
<hr />
<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>
<!--
TAG based safe frames follow strict parsing rules imposed by window.JSON.parse.
Keys MUST be inside double quote marks. Javascript allows a much looser syntax for JSON objects
-->
<script type='text/x-safeframe' class='sf_data' id="sf_tag_1" >
{
"id" : "ad1LREC",
"html" : "<div onclick='alert(\"Unsafe read? \" + window.frameElement.parentElement.id);' style='cursor:pointer;background:darkblue;color:white;height:100%;'><h1 >Hello World Leaderboard</h1></div>",
"conf" :
{
"size" : "728x90",
"dest": "top_leaderboard"
},
"meta" :
{
"rmx":
{
"sectionID" : "14800347",
"siteID" : "140509"
}
}
}
</script>
<div style="clear:both;">SafeFrame 2 Below</div>
<div id='tgtLREC'>
<script type='text/x-safeframe' class='sf_data'>
{
"id": "ad2LREC",
"html": "<sc" + "ript src=\"http://ad.yieldmanager.com/imp?Z=300x250&cb=98098&S=14800347&i=140509&ycg=m&yyob=1990&zip=&_salt=3618426084&B=10&u=http%3A%2F%2Fsports.yahoo.com%2F&r=0&&o=4&\" ></scr" + "ipt>" ,
"conf":
{
"w": 300,
"h": 250
},
"meta":
{
"rmx":
{
"sectionID": "14800347",
"siteID": "140509"
}
}
}
</script>
<!-- b/c a "dest" tag exists (the overall div container) container tags will be rendered here -->
<!-- optional noscript section for fall back -->
<noscript>
<img src="http://ad.yieldmanager.com/imp?Z=300x250&cb=98098&S=14800347&i=140509&ycg=m&yyob=1990&zip=&_salt=3618426084&B=10&u=http%3A%2F%2Fsports.yahoo.com%2F&r=0&&o=4&" width=300 height=250 />
</noscript>
</div>
<h4>SF 3</h4>
<script type='text/x-safeframe' class='sf_data'>
{
"id": "ad3LREC",
"src": "http://ad.yieldmanager.com/imp?Z=300x250&cb=98098&S=14800347&i=140509&ycg=m&yyob=1990&zip=&_salt=3618426084&B=10&u=http%3A%2F%2Fsports.yahoo.com%2F&r=0&&o=4&",
"conf":
{
"w": 250,
"h": 250,
"dest": "tgtLREC3"
},
"meta":
{
"rmx":
{
"sectionID": "14800347",
"siteID": "140509"
}
}
}
</script>
<script type="text/javascript">
function nukePositions(){
$sf.host.nuke();
}
function renderTags(){
$sf.host.boot();
}
function render_input()
{
var el, val, w, h, html, posID, posConf, pos;
$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;
posConf = new $sf.host.PosConfig({id:posID,w:w,h:h,dest:"tgtLREC"});
pos = new $sf.host.Position(posID, html);
$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
}
}
});
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>