У меня довольно длинный бит HTML и Javascript, который я хочу выполнить внутри iFrame.
Я знаю, что вы можете использовать что-то вроде:
iframe.document.open();
iframe.document.write('Hello World!');
iframe.document.close();
Но Html и Javascript довольно длинные, около 180 строк, и мысль о преобразовании всего документа в строку для записи в iframe кажется лучшим решением.
Полный скрипт приведен ниже:
<html>
<head>
<style type="text/css">
html,body,div,a,span,img,iframe{font-size:100%;text-decoration:none;vertical-align:baseline;background:transparent;margin:0;border:0 none;padding:0}
* {
box-sizing: border-box;
}
body {
-webkit-font-smoothing: antialiased;
}
.native_div {
background: #fff;
overflow: hidden;
height: 271px;
width: 283px;
word-wrap: break-word;
cursor: pointer;
font-family: "Segoe UI", "Helvetica Neue", Arial, Sans-Serif;
}
.img_container {
background: #000;
height: 183px;
}
.image-container img {
width: 100%;
}
.box {
display: flex;
align-items: center;
}
a:link,
a:visited,
a:active {
color: inherit;
text-decoration: none;
}
.native_img {
height: 183px;
background-position: center;
background-size: cover;
}
.native_img:hover {
opacity: .8;
}
.native_cta {
display: none;
}
.native_title {
font-size: 15px;
font-size: 0.9375rem;
line-height: 20px;
line-height: 1.25rem;
padding-top: 14px;
padding-bottom: 10px;
color: #333;
padding-left: 13px;
padding-right: 13px;
}
.native_sponsored {
font-size: 11px;
font-size: 0.6875rem;
font-weight: bold;
letter-spacing: -.4px;
color: #333;
padding-left: 13px;
padding-right: 13px;
}
</style>
<script type="text/javascript">
function renderNative(obj, targetId) {
var link = obj.native.clickUrl;
var title = obj.native.title;
var text = obj.native.body || "";
var img = obj.native.image.url;
var icon = obj.native.icon.url;
var sponsored = obj.native.sponsoredBy;
var cta = obj.native.cta;
var content =
'<div class="native_div">' +
'<a href="' + link + '" target="_blank">' +
'<div class="img_container"> <img class="native_img" src="' + img + '" alt="click here"/> </div>' +
'<div class="native_title">' + title + '</div>' +
'<div class="box">' +
'<div class="native_sponsored">' + sponsored + '</div>' +
'</div>' +
'</a></div>';
//Write content to page
document.getElementById(targetId).innerHTML = content;
};
//Retrieve or create apntag objects
var apntag = apntag || {};
apntag.anq = apntag.anq || [];
//Load ast.js
(function() {
var d = document,
e = d.createElement('script'),
p = d.getElementsByTagName('head')[0];
e.type = 'text/javascript';
e.async = true;
e.src = '//acdn.adnxs.com/ast/ast.js';
p.insertBefore(e, p.firstChild);
})();
apntag.anq.push(function() {
//Not using setPageOpts in this example, member set in defineTag
apntag.defineTag({
enableSafeFrame: true,
safeframeConfig: {
allowExpansionByPush:true,
allowExpansionByOverlay:true
},
member: 1705,
targetId: 'nativediv',
tagId: 14807613,
allowedFormats: ['native'],
//Below native specs are optional; For details see: https://wiki.appnexus.com/display/sdk/DefineTag
native: {
title: {
required: false
},
body: {
required: false,
max_length: 300
},
image: {
required: false
},
icon: {
required: false
},
sponsoredBy: {
required: false
},
cta: {
required: false
},
clickUrl: {
required: false
}
}
});
apntag.onEvent('adAvailable', 'nativediv', function(obj) {
renderNative(obj, 'nativediv');
//Fire imp trackers, attach click tracker to div
apntag.fireImpressionTrackers(obj);
apntag.attachClickTrackers(obj, 'nativediv');
});
apntag.onEvent('adNoBid', 'nativediv', function() {
//Write passback in case of no bid
var passback = "passback tag fired";
document.write(passback);
});
apntag.loadTags();
});
</script>
</head>
<body>
<div id="nativediv" class="native_div"></div>
</body>
</html>