嵌入式pdf在Opera浏览器中总是名列前茅
Embedded pdf is always on top in Opera browser
我需要一个嵌入的pdf(我尝试过嵌入和iframe),上面有一个画布(透明),人们可以在上面画画。
在Opera中,嵌入的pdf总是名列前茅。
http://plnkr.co/edit/c1LlRiw2eLiZsp2VAmvb?p=preview
HTML:
<div class="background">
<iframe src="http://mozilla.github.io/pdf.js/examples/learning/helloworld.pdf"></iframe>
</div>
<div class="canvas-container">
<canvas width="400" height="400"></canvas>
</div>
CSS:
.background, .canvas-container
{
width: 400px;
position: absolute;
top: 0; left: 0;
}
.background {
height: 300px;
background-color: #367889;
border: 1px solid red;
z-index: 1;
}
.canvas-container {
height: 400px;
border: 1px dotted blue;
z-index: 2;
}
Javascript:
document.addEventListener("DOMContentLoaded", function() {
var ctx = document.getElementsByTagName('canvas')[0].getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(400, 400);
ctx.stroke();
});
帮帮我,斯塔克佛流,你是我唯一的希望。
看起来是一个非常相关的问题:z-index在iframe 中使用pdf在Internet Explorer中不起作用
我不知道Opera,但我可以使用IE10看到您的问题。不过,由于这段简短的代码工作得很好,所以看起来是pdf特有的:
<!DOCTYPE html>
<html>
<body>
<div>
<iframe src="http://www.w3schools.com" style="position: absolute;">
<p>Your browser does not support iframes.</p>
</iframe>
<div style="height: 300px; width: 200px; background-color:black; position: absolute;">
</div>
</div>
</body>
</html>
相关文章:
- 访问布局信息是否也会导致浏览器重排
- 内部分区字体大小获胜'调整浏览器窗口大小时不会随媒体查询而更改
- 如何使用phaser使html5游戏在移动设备浏览器上运行
- 有时数据是't显示在浏览器中
- 使图像在单击时展开到不大于浏览器
- fetch() 函数未在 Ubuntu Chromium 浏览器上定义
- 不同浏览器中的空白字符正则表达式行为
- 在Windows 10中自动执行例行程序(主要与浏览器交互)
- Windows形成web浏览器控件和Javascript更改的DOM
- 如何临时暂停浏览器渲染,然后恢复整个页面
- 使用angularjs向浏览器发送servlet响应(下载功能)
- 是什么让一个“;Uncaught RangeError:超过了最大调用堆栈大小“;错误(Chrome,在其他浏览器中显示
- 谷歌地图API v3不适用于移动浏览器或PhoneGap
- 禁用(而不是隐藏)浏览器滚动条
- jquery代码在Mozilla中有效,但在其他浏览器上无效
- 如何使用modalDialog来显示可以在所有浏览器中工作的弹出窗口
- 当浏览器上的后退按钮到达主页时,我需要删除Class
- 是否可以在浏览器中使用纯JavaScript保存音频流
- jQuery检测浏览器是否支持Zoom
- 嵌入式pdf在Opera浏览器中总是名列前茅