我正在尝试创建一个将扩展到页面一侧的广告。 使用GPT Safeframe预览工具我收到错误“无效的EXPAND_REQUEST消息。原因:视口或文档主体不够大,无法扩展。”
是否有设置要覆盖此设置,或者这是一个自我限制,
这是我想要做的一个例子: 你可以在这里测试一下:http://publisherconsole.appspot.com/safeframe/creative-preview.html
<div id="container">
<style type="text/css">
#container {
background-color: #EEF;
width: 500px;
height: 500px;
}
button {
width: 50px;
height: 50px;
font-size: 30px;
padding: 0px;
}
#info {
position: relative;
top: 10%;
width: 390px;
margin: auto;
}
#left {
left: 0px;
bottom: 50%;
position: fixed;
}
#right {
right: 0px;
top: 50%;
position: fixed;
}
#top {
top: 0px;
left: 50%;
position: fixed;
}
#bottom {
bottom: 0px;;
right: 50%;
position: fixed;
}
#central-buttons {
margin: 10px auto;
display: block;
width: 210px;
}
#central-buttons button {
font-size: 15px;
width: 100px;
}
</style>
<script>
function expand(direction) {
var allowedExp= $sf.ext.geom().exp;
var config = {
push: false,
t: 0,
l: 0,
r: 0,
b: 0
};
var all = direction === 'all';
if (direction === 'left' || all) {
config.l = allowedExp.l / 2;
}
if (direction === 'right' || all) {
config.r = 900;
}
if (direction === 'top' || all) {
config.t = allowedExp.t / 2;
}
if (direction === 'bottom' || all) {
config.b = allowedExp.b / 2;
};
$sf.ext.expand(config);
}
function collapse() {
$sf.ext.collapse();
}
function adjustDivContainerSize() {
var self = $sf.ext.geom().self;
var el = document.getElementById('container');
el.style.width = (self.r - self.l) + 'px';
el.style.height = (self.b - self.t) + 'px';
}
$sf.ext.register(500, 500, function(status, data) {
if (status === 'geom-update') {
return;
}
var message = 'Status: ' + status + '. Data: <pre>' + JSON.stringify(data, null, ' ') + '</pre>';
document.getElementById('status').innerHTML = message;
adjustDivContainerSize();
});
adjustDivContainerSize();
</script>
<div id="info">
<span>
<strong> $sf.ext.expand by overlay and $sf.ext.collapse</strong>
<br>Creative should be expanded when buttons are clicked. Expansion can be performed
only from collapsed state so subsequent expansion won't work until creative is collapsed.
</span>
<div id="central-buttons">
<button id="collapse" onclick="collapse();">Collapse</button>
<button onclick="expand('all');">Expand all</button>
</div>
<div id="status"></div>
</div>
<button id="left" onclick="expand('left');">⇐</button>
<button id="top" onclick="expand('top');">⇑</button>
<button id="right" onclick="expand('right');">⇒</button>
<button id="bottom" onclick="expand('bottom');">⇓</button>
</div>
答案 0 :(得分:0)
不幸的是,它不可能避免这种行为,但我做了一个解决方法,即等待&#34;,直到用户滚动到位,适合展开,检查这个例子当用户从底部获得空间以扩展整个广告素材时,这将从底部推送横幅:
<div id="container">
some lines to make container height<br>
line<br>
line<br>
line<br>
line<br>
line<br>
line<br>
line<br>
line<br>
line<br>
line<br>
line<br>
line<br>
line<br>
line<br>
line<br>
line<br>
line<br>
<script>
// global expanded indicator variable, because API don't have any
var expanded = false;
function expand() {
var self= $sf.ext.geom().self;
var config = {
push: true,
b: 0
};
var el = document.getElementById('container');
var containerHeight = el.offsetHeight;
// get height from bottom, that need to be expanded
var expandBottom = containerHeight - self.h;
// if container is whole inside a SafeFrame, it will not expand
if(expandBottom < 0) return;
config.b = expandBottom;
$sf.ext.expand(config);
}
function expandDelayed(forceExpand) {
// expand will run just once, or you can force it to run again
// but collapse first is needed
if(expanded && forceExpand || !expanded) {
$sf.ext.collapse();
expanded = false;
// there must be some timeout, because .collapse(); method is deplayed somehow
setTimeout(expand, 0);
}
}
$sf.ext.register(160, 150, function(status, data) {
// this code will do whole magic of "waiting" for right moment
if (status === 'geom-update') {
expandDelayed();
}
// change global expanded status
if (status === 'expanded') {
expanded = true;
}
});
// init
expandDelayed();
</script>
</div>
希望它有所帮助!
编辑:
我在这里找到了更好的解决方案: Unable to access contents of a safeframe returned by Google adx