Question

I'm trying to implement an expanding banner ad on my site and I'm having trouble getting the clickthrough link to work.

I created an expanding ad in GWD and the only way I can serve it is by hosting it on my site and loading it in an iFrame.

I then need to wrap an tag around that iFrame as I'm using DFP which requires me to put %%CLICK_URL_UNESC%%%%DEST_URL%% as the URL in order for it to track clicks.

I managed to get the iFrame to expand on hover using CSS but when I force the anchor to go over the top of the iFrame, the HTML5 banner inside the iframe no longer picks up the hover event.

Here's a preview link to see it working

以下是我正在使用的广告代码：

<style>

.expandable {
height: 120px;
overflow: hidden;
transition:all .3s ease;
z-index: 5;
}

.expandable:hover {
height: 322px !important;
}

</style>

<iframe class="expandable" src="http://www.accessandmobilityprofessional.com/wp-content/uploads/2018/03/John%20Preston/index.html" height=322 width=1040 scrolling=no frameborder=0> 
<a class="expandable" href="%%CLICK_URL_UNESC%%%%DEST_URL%%" style="position:absolute; top:1; left:1; display:inline-block; width:1040px; height:120px; z-index:5;"> </a>
</iframe>

编辑：

我现在差不多了。我将<iframe>和<a>设置为永久具有展开的高度，然后将<div>设置为overflow:hidden。通过在悬停时将<a>设置为display:none然后设置display:block，我几乎可以获得我想要的效果。由于将鼠标悬停在广告上会激活过渡，而div上的css也会扩展div并显示<a>

现在当我将鼠标悬停在它上方时展开<div>，显示整个<a>和<iframe>。它还告诉HTML5横幅显示第二页。但是，当我关闭鼠标时，它会缩小<div>并删除<a>，但HTML5横幅不会检测到mouseout事件，因为<a>挡住了。

现在是代码：

<style>

.expandable {
 position: relative;
 transition: height .3s;
}

.expandable:hover {
  height: 322px !important;
}

.expandable a {
 display:none !important;
}

.expandable:hover a {
 display:inline-block !important;
}

</style>

<div class="expandable" style="height:120px; display:inline-block; overflow: hidden;">
<a href="%%CLICK_URL_UNESC%%%%DEST_URL%%" style="position:absolute; top:1; left:1; display:none; width:1040px; height:322px; z-index:5;"> </a>
<iframe src="http://www.accessandmobilityprofessional.com/wp-content/uploads/2018/03/John%20Preston/index.html" height=322 width=1040 scrolling=no frameborder=0> 
</iframe>
</div>

Answer 1

如果浏览器不支持框架，那么只有当<a>显示在浏览器不支持框架时才会显示<a>。因此，这些日子基本上都不会。）包含iframe的链接也不起作用，因为用户点击永远不会从iframe冒出来到你的链接href。

假设iframe的内容不需要是可点击的，并且用户点击应该转到.container iframe, .container a { position: absolute; width: 100%; height: 120px; transition: height .3s; } .container { position: relative } .container:hover a, .container:hover iframe { height: 322px }的href：您可以将该链接视为顶部的叠加层框架，并将悬停规则放在容器上：

<div class="container">
  <iframe src="https://example.com"></iframe>
  <a href="/"></a>
</div>

var docRef = db.collection("cities").doc("SF");

docRef.get().then(function(doc) {
    if (doc.exists) {
        console.log("Document data:", doc.data());

//**I want to get all keys in the document here.**

    } else {
        // doc.data() will be undefined in this case
        console.log("No such document!");
    }
}).catch(function(error) {
    console.log("Error getting document:", error);
});

<a> over iFrame containing HTML5 expanding advert

1 个答案: