将 CSS（垂直线）应用到父文档中的 iFrame答案

【问题标题】：Applying CSS (a vertical line) to an iFrame from the parent document将 CSS（垂直线）应用到父文档中的 iFrame
【发布时间】：2014-05-15 13:27:54
【问题描述】：

我的 web 应用程序中有一个“将文本/PDF 导出到 Excel”功能。我在 jsp（父文档）内的 iFrame 中显示要导出到 excel 的同一域中的原始报告

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

在现有页面中，我要求用户单击 iFrame 内的位置/点进行列拆分，即 2 个选定拆分点之间的文本在生成的 excel 表中形成一列，我使用 jQuery 事件记录位置。第 X 页。现在我需要帮助的是，我希望通过垂直的彩色细线突出显示所选位置，作为从 iFrame 顶部边缘到底部边缘的列标记

这就是我想要的： Click to view the resultant jsp page

请大家帮忙！！！

【问题讨论】：

您不能从父框架将样式应用于 iframe 本身或内容（假设这里是 TXT 文件而不是 HTML 文档）。您可以将样式应用于 iframe 周围的 DIV 容器
感谢您的回复！我只需要从框架边缘的顶部到底部的垂直线。如果它是 DIV 会很好，但我不确定的一件事是如何根据像素位置将 css 应用于 div（我有可用的像素位置）
是的，没问题，请在下面查看我的答案。

标签： javascript jquery css jsp iframe

【解决方案1】：

最终将元素相互放置，文本文件是我从谷歌选择的随机文件。您必须跟踪点击次数，但困难的部分已经完成，代码可能会更简洁一些，但我希望它可以解决您的问题。

回答需要 jQuery

现场演示：http://jsfiddle.net/3aQC4/1/

<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>

【讨论】：

非常感谢伙计！是的，我还有其他部分，比如跟踪点击和工作。只是在等待这个CSS的东西。不错的一个:)
糟糕！伙计，我无法用这个修复我的代码。 'con' DIV & 我的 iframe 和结果行都搞砸了。我之前在您的修复中发布的 jsp 页面的要点：jsfiddle.net/Chande07/jyXQY/3