在iframe上覆盖画布-HTML

Question

在iframe上覆盖画布-HTML

Dav*_*son 5 html iframe overlay canvas z-index

我正在忙着编写一个生成HTML代码的servlet。目的是创建一个热图，以供人们根据所存储的点击数据在网站上点击。我发现使用javascript在画布中创建热图，现在我想将该画布覆盖在点击信息所针对的网页上。

到目前为止，这是我的HTML，它成功生成了热图，并创建了iframe。iframe覆盖在热图上。目前，我不知道如何使iframe的大小与网页的大小相同，以致似乎正在查看的网站上覆盖了热图：

<html> 
    <head> 
        <style> 
            #heatmapArea{
            position:relative;
            float:left;
            width:410px;
            height:410px;
                            z-index:1000;
            border:1px dashed black;

                    #iframeArea{
                            position:relative;
                            float:left;
                            width:100%;
                            height:100%
                            z-index:1;
                    }
        }
    </style> 
</head> 

<body> 
    <div id="main"> 
        <div id="heatmapArea"> 
                        <div id="iframeArea">
                            <iframe src="www.google.com"></iframe>
                        </div>

        </div> 
    </div> 

    <script type="text/javascript" src="heatmap.js"></script> 
    <script type="text/javascript"> 


    window.onload = function(){
        var xx = h337.create({"element":document.getElementById("heatmapArea"), "radius":10, "visible":true});
        var el = "{max: 100, data: [{x: 20, y: 20, count: 10},{x: 200, y: 200, count: 43},{x: 200, y: 400, count: 7},{x: 380, y: 400, count: 6},{x: 400, y: 400, count: 4},{x: 280, y: 260, count: 100},{x: 80, y: 60, count: 40},{x: 166, y: 260, count: 85},{x: 300, y: 400, count: 34},]}";
        var obj = eval('('+el+')');
        xx.store.setDataSet(obj);
    };

    </script> 
</body>

Run Code Online (Sandbox Code Playgroud)

我是一名认真的HTML新手-我该怎么做才能实现自己想要的目标？

万分感谢！

Answer 1

Kal*_*vas 3

据我了解，你想用 html 和 css 来完成它。那么也许：

第 1 步： 将其添加到您的 CSS 中：html, body {height: 100%;}

步骤 2 将其添加到您的 iframe 类中：position: absolute; width: 100%; height: 100%;

我创建了一个快速小提琴来向您展示它是如何工作的：http://jsfiddle.net/hobobne/a3muZ/

归档时间：	14 年，1 月前
查看次数：	4404 次
最近记录：	14 年，1 月前