javascript - 使用 HTML 并排显示两个文档

标签 javascript html css image

我是 HTML 的新手,希望做一些应该相当简单的事情。我搜索了类似的问题并尝试了解决方案,但没有一个有效。

我想在单击链接时并排显示网页中的两个文档。文件是远程存储的,不是静态的。一个是PDF,一个是图片,所以我感觉PDF可能需要嵌入所以有滚动条?

两个文档都在显示,但第二个文档(图像)在屏幕中央部分覆盖第一个文档。

我的代码如下:

<a href= "#" onclick= "lightbox_open();"><b>Click me to view files</b></a>

<div id= "light"><a href= "#" onclick= "lightbox_close();"><embed src= "?php
echo $address ?>" style= "float: left;"/><img src = "<?php echo $address2 
?>" style= "float: left; " /></a></div>

<div id= "fade" onclick="lightbox_close();"></div>

<div>

**请注意,当显示文档时,lightbox_open() 和 lighbox_close() 函数只是用来调暗屏幕。

如有任何帮助,我们将不胜感激。

最佳答案

源代码完全相同,只是用 embed 替换了 iframe。

<style> html,
body {
  width: 100%;
  height: 100%;
}
#doc1,
#doc2 {
  display: inline-block;
  width: 49%;
  height: 100%
}
iframe {
  width: 100%;
  height: 100%;
  border: none;
}
#doc1 {
  background-color: red;
}
#doc2 {
  background-color: blue;
}
<html>

<head>
</head>

<body translate="no">

  <div id="doc1">
    <iframe src="http://www.pdf995.com/samples/pdf.pdf"></iframe>
  </div>

  <div id="doc2">
    <iframe src="http://www.pdf995.com/samples/pdf.pdf"></iframe>
  </div>
</body>

</html>

您无法在此处看到 iframe,因为 stackoverflow 中的代码片段已经在 iframe 中,而 iframe 无法加载到另一个 iframe 中。

关于javascript - 使用 HTML 并排显示两个文档,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41486831/

相关文章:

css - 提高 CSS 类开关的性能

javascript - 你会推荐什么框架来为网络制作类似桌面的应用程序?

javascript - 添加屏幕分辨率宽度>1028的背景图片

javascript - 增加输入标签内的 ID 属性

html - 如何获得漂亮的字体平滑? (以及如何模仿 Medium.com 字体样式?)

html - 显示与 HTML 内联的元素?

javascript - 比较数组并删除对象

javascript - 激活 serviceworker 时使用 fetch 创建 indexeddb

javascript - 我们如何在 html 中通过某种不透明度使两个部分可见的同时在另一个部分之上显示一个部分?

jquery - 在 css 动画 jQuery 期间更新元素偏移量