[英]Hide JS element without div or class
我试图隐藏SSRS报告的工具栏。
有一个特定的原因为什么我需要使用JS(该报告将包含在CRM 2011仪表板中,并且我想从该报告中删除该工具栏。由于该报告参数不起作用,因此我导入了Report Control解决方案,编辑使用JS的查看器)。 查看器是一个HTML页面,可将报表作为IFrame嵌入。 生成的HTML代码为:
<table id="reportViewer_fixedTable" cellspacing="0" cellpadding="0" style="table-layout:fixed;width:100%;height:100%;">
<tbody>
<tr style="background-color:#C4DDFF;"> … </tr>
<tr id="ParametersRowreportViewer" style="display:none;"> … </tr>
<tr style="height:6px;font-size:2pt;display:none;"> … </tr>
<tr>
该工具栏位于第4个tr中,直接选择它并尝试隐藏它不起作用。
navCorrectorDiv = report.contentWindow.document.getElementById('reportViewer_Toolbar');
if (navCorrectorDiv != null) {
navCorrectorDiv.style.display = "none";
}
我应该选择可以执行的表reportViewer_fixedTable,然后选择tbody元素,然后选择第四个tr。 有办法吗? 可能没有jQuery。
选择元素
作为jQuery选择器:
var selected;
selected = jQuery('#reportViewer_fixedTable');
…
selected = jQuery('#reportViewer_fixedTable tbody');
…
selected = jQuery('#reportViewer_fixedTable tr:nth-child(4)');
隐藏所选内容:
selected.css('display', 'none');
或在没有jQuery的现代浏览器中:
var selected;
selected = document.querySelector('#reportViewer_fixedTable');
…
selected = document.querySelector('#reportViewer_fixedTable tbody');
…
selected = document.querySelector('#reportViewer_fixedTable tr:nth-child(4)');
并隐藏:
selected.style.display = 'none';
iframe可能会出现问题,因为它可能是沙盒的,或者内容可能来自其他域。 这可能导致违反XSS,在您的情况下,这可能是无法修复的。
无论如何,我们开始:
//Select the first iframe (which might not be the right one in your case);
var elem = document.querySelector('iframe');
//And put it's body in a variable. We use the querySelector from the body
//of the iframe.
var ibody = elem.contentWindow.document.body;
var table = ibody.querySelector('#reportViewer_fixedTable');
var tbody = ibody.querySelector('#reportViewer_fixedTable tbody');
var fourthtr = ibody.querySelector('#reportViewer_fixedTable tr:nth-child(4)');
table.style.display = 'none';
tbody.style.display = 'none';
fourthtr.style.display = 'none';
我想你可以尝试找到第n个Chid
考虑这种方法:
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<table id="reportViewer_fixedTable" cellspacing="0" cellpadding="0" style="table-layout:fixed;width:100%;height:100%;">
<tbody>
<tr style="background-color:#C4DDFF;"> <td>1</td> </tr>
<tr id="ParametersRowreportViewer" style="display:none;"><td>2</td> </tr>
<tr style="height:6px;font-size:2pt;display:none;"> <td>3</td> </tr>
<tr><td>FourthTR</td></tr>
</tbody>
</table>
</body>
</html>
JS:
$(function(){
console.log( $('#reportViewer_fixedTable tbody tr:nth-child(4) td:nth-child(1)').text());
$('#reportViewer_fixedTable tbody tr:nth-child(4) td:nth-child(1)').addClass('FourthTR');
$('.FourthTR').hide();
});
因此,我们想要做的是,先获取表的第4个tr,然后再获取第4个tr的第一个孩子。 完成后,我们将即时向其添加一个类,例如FourthTR
,然后使用jQuery.hide()
隐藏该类。 瞧,您完成了。
请在此处查看工作示例: http : //jsbin.com/ACam/1/edit 。 与往常一样,请记住run with js
。
我认为您不需要为此使用JavaScript
如果您有权访问ReportControl解决方案和ReportViewer.aspx.cs的服务器端代码,则可以设置属性
reportViewer.ShowToolBar = false
在该代码中。
另外,如果您有权访问并可以修改查看器页面标记(ReportViewer.aspx),则可以进行声明式设置:通过将ShowToolBar="false"
添加到ReportViewer控件声明中:
<rsweb:ReportViewer ID="reportViewer" runat="server" ... ShowToolBar="false">
</rsweb:ReportViewer>
如果这不是一个选择,则可以通过添加rc:Toolbar=false
参数来修改传递给IFrame托管ReportViewer的URL。
http://localhost/ReportServer/Pages/ReportViewer.aspx?%2fMyReport%2fBEA&rs:Command=Render&rc:Toolbar=false
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.