2
私はHTMLコードを生成するサーブレットを作成しています。目標は、それらのクリックの保存されたデータからウェブサイトをクリックするヒートマップを作成することです。キャンバスにヒートマップを作成するためのjavascriptが見つかりました。クリック情報が表示されているウェブページ上にそのキャンバスをオーバーレイしたいと考えています。iframe上にキャンバスを重ねる - HTML
ヒートマップが正常に生成され、iframeが作成されたのはこれまでのHTMLです。ヒートマップ上に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>
は深刻HTMLの初心者イム - 何私は何が起こりたいのですか？
ありがとう！
あなたはインラインフレームをスクロールダウンしすぎた場合にページスクロールを下に作るための方法があります：
は、私はそれがどのように動作するか、お見せするために迅速なフィドルを作成しましたか？問題はiframeがスクロールしてヒートマップのコンテキストが失われてしまうことです。 ヒットマップは、人々がスクロール/ズームした場所を示すヒートマップです。http://imgur.com/a/Uhljn#GgWJ6 実際のページがスクロールダウンすると、コンテキストは保持されます。 http://imgur.com/a/Uhljn#wwT2S iframeをスクロールすると、ヒートマップはスクロールせず、コンテキストが失われます。http://imgur.com/a/Uhljn#bhXSu –私は間違ったことを理解しているかもしれませんが、このような意味ですか？ http://jsfiddle.net/hobobne/a3muZ/1/もちろん、これは上、右、下、左の位置を意味します。しかし、それをスクロールに貼り付ける：位置：固定; –