gpt4 book ai didi

javascript - 将 CSS(垂直线)应用于父文档中的 iFrame

转载 作者:行者123 更新时间:2023-11-28 10:27:22 24 4
gpt4 key购买 nike

我的网络应用程序中有“将文本/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

有人请帮忙!!!

最佳答案

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

答案需要 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>

关于javascript - 将 CSS(垂直线)应用于父文档中的 iFrame,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23669095/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com