Fatal编程技术网
  • javascript/
  • Javascript HTML:td-iframe位于表中。是否可以在外部空白处显示？

Javascript HTML:td-iframe位于表中。是否可以在外部空白处显示？

javascript jquery html css iframe

Javascript HTML:td-iframe位于表中。是否可以在外部空白处显示？,javascript,jquery,html,css,iframe,Javascript,Jquery,Html,Css,Iframe,这是我的style.css（来自jssfiddle） 这是我的jquery.js（来自JSFIDLE） 下面是从文本文件生成的html。最后一列的宽度是1280px，尽管我要求它仅用于iframe。当我将鼠标悬停在维基百科文本上时，显示在列中，这使得它非常烦人，无法悬停到下一条记录上。我确实在网上和堆栈溢出上搜索过，但找不到我的td标签的有效设置。是否有任何指针可以将显示带到列之外 <link rel="stylesheet" href="style.css"> <script

这是我的style.css（来自jssfiddle）

这是我的jquery.js（来自JSFIDLE）

下面是从文本文件生成的html。最后一列的宽度是1280px，尽管我要求它仅用于iframe。当我将鼠标悬停在维基百科文本上时，显示在列中，这使得它非常烦人，无法悬停到下一条记录上。我确实在网上和堆栈溢出上搜索过，但找不到我的td标签的有效设置。是否有任何指针可以将显示带到列之外

<link rel="stylesheet" href="style.css">
<script src="jquery.js"></script>

<html>
<style type=text/css>
            table, th, td {
            border: 1px solid black;
            }
            </style>
   <body>
<table>
<th>HEADING1</th>
<th>HEADING2</th>
<th>HEADING3</th>
<th>HEADING4</th>
<tr>
<td>sam</td>
<td> newyork</td>
<td> 1345B</td>
<td style="width: 1280px"> <div id="comments"> <a href="#"     class="btn">Wikipedia</a> <div id="comment-wrap"> <iframe     src="http://wikipedia.com" width="1280" height="720"></iframe> </div>     </div></td>
</tr>
<tr>
<td>msnam</td>
<td> newsdfyork</td>
<td> 1345B</td>
<td> 783473</td>
</tr>
<tr>
<td>sadfm</td>
<td> newysdfork</td>
<td> 1345B</td>
<td> 7sdf83473</td>
</tr>
<tr>
<td>sam</td>
<td> newysdfork</td>
<td> 1345B</td>
<td> 783sdf473</td>
</tr>
<tr>
<td>sasdfm</td>
<td> newysdfork</td>
<td> 1345B</td>
<td> 7834sdf73</td>
</tr>
</table>
   </body>
</html>


表，th，td{
边框：1px纯黑；
}
标题1
标题2
头3
头4
山姆
纽约
1345B
msnam
纽约新闻
1345B
783473
萨达姆
新作
1345B
7sdf83473
山姆
新作
1345B
783sdf473
sasdfm
新作
1345B
7834sdf73

也许你想要“飞行”iframe

var DIVcomments=document.getElementById（'comments'）；
var DIVcomment_wrap=document.getElementById（'comment-wrap'）；
DIVcomments.addEventListener（'mouseover'，function（）{
var pos=DIVcomments.getBoundingClientRect（）；
DIVcomment_wrap.style.top=pos.top+“px”；
DIVcomment_wrap.style.left=（位置左侧+70）+“px”；
DIVcomment_wrap.getElementsByTagName（'iframe'）[0].style.width=（document.body.offsetWidth-pos.left-90）+“px”；
DIVcomment_wrap.style.display='block'；
});
DIVcomments.addEventListener（'mouseout'，function（）{
DIVcomment_wrap.style.display='none'；
});

#注释{
背景：#fff
}
iframe{
宽度：100%；
高度：1200px；
边界：0；
}
#注释换行{
背景：#fff；
职位：相对
}
#评论#评论总结{
显示：无；
z指数：5；
填充：10px；
位置：绝对位置；
}
#注释：悬停#注释换行{
显示：块
}
桌子
th，
运输署{
边框：1px纯黑；
}
iframe{
边框：1px实心#ccc；
}



标题1
标题2
头3
头4
山姆
纽约
1345B
msnam
纽约新闻
1345B
783473
萨达姆
新作
1345B
7sdf83473
山姆
新作
1345B
783sdf473
sasdfm
新作
1345B
7834sdf73

那么iFrame是否在表中？您可以设置
元素本身的样式，但不幸的是，如果不访问iFrame的CSS，就不可能在
中设置任何样式。因此style.CSS与iFrame的CSS不同？是的。维基百科有自己的
style.css
。当您使用iFrame时，您还需要完成该页面上的所有内容，包括加载他们的CSS文件。考虑到任何人都可以构建其他人的网站，你不能将修改他们的CSS作为安全措施。你想做的是不可能实现的。谢谢你的评论。有没有办法改变上面的CSS或JS，而不是悬停和显示-当单击并弹出iframe，当再次单击时关闭iframe？是的，这是绝对可能的，因为你只是在改变网站上的行为。只需制作一个按钮，在模式弹出窗口中启动iFrame。我个人通常使用Bootstrap，并使用它。如果您没有使用引导（或类似的框架），您必须创建自己的模式。谢谢。但最后一列的宽度必须与其他三列相似。悬停弹出窗口不应干扰列。但不幸的是，即使是你的想法仍然会在专栏上弹出，使其难以悬停。谢谢你的时间。

hover = function() {
  if (!document.body.currentStyle) return;
  var DIVcomments = document.getElementById('comments');
  var DIVcomment_wrap = document.getElementById('comment-wrap');
  DIVcomments.onmouseover = function() {
    DIVcomment_wrap.style.display = 'block';
  }
  DIVcomments.onmouseout = function() {
    DIVcomment_wrap.style.display = 'none';
  }
}
window.onload = hover;



<link rel="stylesheet" href="style.css">
<script src="jquery.js"></script>

<html>
<style type=text/css>
            table, th, td {
            border: 1px solid black;
            }
            </style>
   <body>
<table>
<th>HEADING1</th>
<th>HEADING2</th>
<th>HEADING3</th>
<th>HEADING4</th>
<tr>
<td>sam</td>
<td> newyork</td>
<td> 1345B</td>
<td style="width: 1280px"> <div id="comments"> <a href="#"     class="btn">Wikipedia</a> <div id="comment-wrap"> <iframe     src="http://wikipedia.com" width="1280" height="720"></iframe> </div>     </div></td>
</tr>
<tr>
<td>msnam</td>
<td> newsdfyork</td>
<td> 1345B</td>
<td> 783473</td>
</tr>
<tr>
<td>sadfm</td>
<td> newysdfork</td>
<td> 1345B</td>
<td> 7sdf83473</td>
</tr>
<tr>
<td>sam</td>
<td> newysdfork</td>
<td> 1345B</td>
<td> 783sdf473</td>
</tr>
<tr>
<td>sasdfm</td>
<td> newysdfork</td>
<td> 1345B</td>
<td> 7834sdf73</td>
</tr>
</table>
   </body>
</html>