我想在网络应用程序上应用访问控制。我有一个数组AllowedElementsArray，其中包含元素名称。我想在 DOM 准备好之前只将允许的元素添加到 DOM 中。
//my array
var AllowedElementsArray = ['textbox','button','radioButton'];
// HTML elements
<body>
Name: <input type='text' class='textbox'/>
Task: <input type='text' />
Hola: <input type='checkbox' class='checkbox'/>
Hello: <input type='radio'/>
Foo: <input type='radio' class='radioButton'/>
Bar: <input type='button' class='button'/>
</body>
// after DOM is ready only these elements should be shown
Name: <input type='text' class='textbox'/>
Foo: <input type='radio' class='radioButton'/>
Bar: <input type='button' class='button'/>
或者还有其他有效的方法吗，因为我的 HTML 很密集，元素太多。
最佳答案
如果您非常注重访问控制，那么我建议您从服务器端生成 HTML，否则，如果您想在客户端执行操作，那么客户端无论如何都可以进行操作。
<小时/>Jquery 方法
无论如何，可以按照下面的建议在客户端执行此操作。 这里还有一个 Working Sample
将您的 HTML 更改为，以便在将其包裹在 span 周围时轻松删除不需要的元素。
<div id="elements">
<span>Name:<input type='text' class='textbox' /></span>
<span>Task:<input type='text' /></span>
<span>Hola:<input type='checkbox' class='checkbox' /></span>
<span>Hello:<input type='radio' /></span>
<span>Foo:<input type='radio' class='radioButton' /></span>
<span>Bar:<input type='button' class='button' /></span>
</div>
下面的脚本，我使用了 $.inArray() 检查数组中是否存在元素类。
var AllowedElementsArray = ['textbox', 'button', 'radioButton'];
$(function() {
$.each($('#elements input'), function() {
var $input = $(this);
var shouldBeRetained = $.inArray($input.attr('class'), AllowedElementsArray);
if (shouldBeRetained == -1) { // -1 is given when the class is not found in the array
$input.parent().remove();
}
});
$('body').show();
});
也有这种样式，所以想法是最初隐藏 body直到我们删除了不需要的元素。当我们的脚本执行完毕后，我们可以显示 body
body{
display:none;
}
MVC 方法
编辑:既然你说你正在使用MVC，你可以在没有Jquery的情况下做到这一点，你所要做的就是添加 if检查所有输入控件。需要明确的一件事是您在 .cshtml 中编写的 C# 代码是什么？文件是服务器端的，即MVC框架执行.cshtml中的所有代码文件，最终结果将是纯 HTML、Javascript(如果有)、Css(如果有)，作为对浏览器的响应返回。您将不会在浏览器的 View 页面中看到 razor 或 c# 语法。因此，正如互联网上的所有信息都提到 data is sent from controller to view ，它并不完全正确。数据从 Controller 传递到名为 View() 的方法这将获取相应的 .cshtml文件并对其进行处理，最终结果将传递到浏览器(这是纯 HTML，而不是 .cshtml)。因此，一旦您清楚了这一点，您的问题就可以如下解决。
在 Controller 中将可见类型的数组添加到 Viewbag 中；
ViewBag.AllowedElements = ["textbox", "button", "radioButton"];
现在，在顶部 View 中添加此代码块并将 ViewBag 数据分配给变量。
@{
var allowedElements = ViewBag.AllowedElements;
}
现在向所有输入元素添加 if 检查。
<div id="elements">
@if(allowedElements.Contains("textbox")){
<span>Name:<input type='text' class='textbox' /></span>
}
@if(allowedElements.Contains("text")){
<span>Task:<input type='text' /></span>
}
@if(allowedElements.Contains("checkbox")){
<span>Hola:<input type='checkbox' class='checkbox' /></span>
}
@if(allowedElements.Contains("text")){
<span>Hello:<input type='radio' /></span>
}
@if(allowedElements.Contains("radioButton")){
<span>Foo:<input type='radio' class='radioButton' /></span>
}
@if(allowedElements.Contains("button")){
<span>Bar:<input type='button' class='button' /></span>
}
</div>
这样只有满足 if 的元素检查被发送到浏览器，并且比在 Jquery 中进行检查更干净。
希望这有帮助...
关于javascript - 在 DOM 准备好之前有条件地加载 HTML 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40912130/