隐藏不带div或类的JS元素



我正试图隐藏SSRS报告的工具栏。

我需要使用JS有一个特定的原因(报告将包含在CRM 2011 Dashboard中,我想从报告中删除工具栏。由于报告参数不起作用,我导入了报告控制解决方案,我正在编辑使用JS的查看器)。查看器是一个Html页面,它将Report嵌入为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。

案例:无Iframe

选择元素

作为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中的内容

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();
});

所以,我们要做的是,我们抓住表的第四个tr,然后抓住第四个tr的第一个子。一旦完成,我们将在运行中向其中添加一个类,比如FourthTR,然后使用jQuery.hide()隐藏该类。沃伊拉,你完了。

请参阅此处的工作示例:http://jsbin.com/ACam/1/edit。一如既往,记住run with js

我认为这个不需要使用JavaScript

如果您可以访问ReportViewer.aspx.cs的ReportControl解决方案和服务器端代码,则可以设置属性

reportViewer.ShowToolBar = false

在那个代码中。

或者,如果您可以访问并修改查看器页面标记(ReportViewer.aspx),则可以声明式设置:通过将ShowToolBar="false"添加到ReportViewer控件声明:

<rsweb:ReportViewer ID="reportViewer" runat="server" ... ShowToolBar="false">
</rsweb:ReportViewer>

如果这不是一个选项,您可以通过添加rc:Toolbar=false参数来修改您传递给承载ReportViewer的IFrame的URL

http://localhost/ReportServer/Pages/ReportViewer.aspx?%2fMyReport%2fBEA&rs:Command=Render&rc:Toolbar=false

最新更新