Javascript 将CSS（垂直线）应用于父文档的iFrame_Javascript_Jquery_Css_Jsp_Iframe

Javascript 将CSS（垂直线）应用于父文档的iFrame

javascript jquery css jsp iframe

Javascript 将CSS（垂直线）应用于父文档的iFrame,javascript,jquery,css,jsp,iframe,Javascript,Jquery,Css,Jsp,Iframe,我的webapp中有“将文本/PDF导出到Excel”功能。我在jsp（父文档）中的iFrame中显示要导出到excel的同一域中的原始报表在现有页面中，我要求用户单击iFrame内的位置/点进行列拆分，即，两个选定拆分点之间的文本在生成的excel工作表中形成一列，我使用jQuery的event.pageX记录位置。现在我需要帮助的地方是，我希望通过垂直的彩色细线高亮显示选定的位置，作为从iFrame的上边缘到下边缘的列标记这就是我想要的：有人请帮忙最终将元素放置在彼此上方，文本

我的webapp中有“将文本/PDF导出到Excel”功能。我在jsp（父文档）中的iFrame中显示要导出到excel的同一域中的原始报表

在现有页面中，我要求用户单击iFrame内的位置/点进行列拆分，即，两个选定拆分点之间的文本在生成的excel工作表中形成一列，我使用jQuery的event.pageX记录位置。现在我需要帮助的地方是，我希望通过垂直的彩色细线高亮显示选定的位置，作为从iFrame的上边缘到下边缘的列标记

这就是我想要的：

有人请帮忙

最终将元素放置在彼此上方，文本文件是我从谷歌选择的随机文件。你将不得不跟踪点击，但困难的部分已经完成，代码可以稍微干净一点，但它回答了你的问题，我希望

答案需要jQuery

现场演示：


#con，.line{
显示：块；
位置：绝对位置；
排名：0；
左：0；
高度：300px；
宽度：600px；
边框：1px纯黑；
z指数：10；
背景色：透明；
}
.线路{
边界：无；
右边框：1px纯黑；
z指数：5；
}
iframe{
位置：绝对位置；
排名：0；
左：0；
z指数：1；
高度：300px；
宽度：600px；
}
$（'#con'）。单击（函数（e）{
var html=''；
$（'body'）.append（html）；
});

您不能从父框架将样式应用于iframe本身或内容（假定此处为TXT文件，而不是HTML文档）。您可以将样式应用于iframe周围的DIV容器感谢您的回复！我只需要从框架边缘的顶部到底部的垂直线。如果它是DIV的，那就好了，但有一件事我不确定，那就是如何根据像素位置（我有可用的像素位置）将css应用到DIV上。是的，没问题，检查我下面的答案。非常感谢，伙计！是的，我有其他的部分，比如跟踪点击和工作。我只是在等css的东西。不错：）哎呀！伙计，我不能用这个来修复我的代码。“con”DIV和my iframe以及生成的线路都是错误的。我之前发布的jsp页面的要点以及您的修复程序：

<iframe name="imgbox" id="imgbox" scrolling="yes" width="80%" height="400" src="/xxx/xx.txt" ></iframe>

<html><head>
<style>
#con, .line{
    display:block;
    position:absolute;    
    top:0;
    left:0;
    height:300px;
    width:600px;
    border:1px solid black;
z-index:10;
    background-color:transparent;
}

.line{
    border:none;
    border-right:1px solid black;
    z-index:5;
}

iframe {
    position:absolute;    
    top:0;
    left:0;
    z-index:1;
    height:300px;
    width:600px;
}
</style>
</head>
<body>
  <div id="con"></div>
  <iframe class="stack" src="http://textfiles.com/bbs/dljunkie.txt"></iframe>


<script>
$('#con').click(function(e){
var html='<div style="width:'+e.offsetX+'px;border:1px solid red" class="line"></div>';
$('body').append(html);
});
</script>

</body>
</html>