个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我有一个向我发送 JS 和 CSS 的第三方 API 响应，我将其注入(inject)文档头部。
Model.retrieve().then(res => {
// inject to the DOM
if(res) {
$("head").prepend( res.css ); //res.css would be a <style>
$("head").append( res.js ); // Would be a <script> ... </script>
let div = document.getElementById( 'banner-outerwrap' );
div.insertAdjacentHTML( 'beforeend', res.html );
} else {
// No response, do the cleanup.
}
})
问题:
如果响应为空，我想清理/删除(CSS 和 JS)。 (即对于不适用的用例)但我不确定如何在不刷新 DOM 的情况下使用 jQuery 来做到这一点。 (我在 directive.js 中运行这段代码，但我无法刷新 DOM，因此我需要清理)
如有任何见解，我们将不胜感激。
最佳答案
据我所知，目前您正在注入(inject)一些包裹在 <script> 中的脚本根据您从 API 收到的文本响应在文档中添加标签，之后要清理/删除。
问题是 <head> 中可能有多个脚本标记并且您不会跟踪注入(inject)的脚本，这将更灵活，更容易操作您的文档。
为此，我希望您使用 DocumentFragment函数 createDocumentFragment .
诀窍在于，在注入(inject)脚本之前，您需要提供 <script>标记一些 id或 class这样您就可以稍后在收到新响应时选择该标签，而不是删除所有标签。
我将继续收到 response ，假设我们有以下响应
var response='<script>alert("hello all")<\/script>';
现在我们将上面的脚本标签作为文本分配给它 class我们需要将其转换为一个节点，然后将其附加到 documentFragment并为其分配一个新属性 class然后将其附加到文档中
//create a document fragment
let htmlFragment = document.createDocumentFragment();
//create a div element to hold the response
let tempNode = document.createElement('div');
//add response to the div
tempNode.innerHTML = response;
//append the <script> tag from the div to the fragment
htmlFragment.appendChild(tempNode.firstChild);
//select script tag from the fragment now
let scriptTag = htmlFragment.querySelector('script');
//add class to the <script> tag
scriptTag.setAttribute('class', 'removeables');
//append the tag to the document body
$(document.body).append(fragment);
完成后，您现在可以通过以下方式轻松选择和删除脚本标签
$('.removeables').remove();
上面给出了一个工作示例，它在页面加载时注入(inject)脚本标记，然后在单击按钮时注入(inject)脚本标记 delete它会删除您可以打开 HTML 检查器并查看的脚本标记。
我创建了一个函数 updateTags(response)您可以将 <script> 传递给它响应并返回一个 documentfragment您可以使用 jquery 附加它或 javascript .
//method to add script
function updateTags(response) {
let htmlFragment = document.createDocumentFragment();
let tempNode = document.createElement('div');
tempNode.innerHTML = response;
htmlFragment.appendChild(tempNode.firstChild);
let scriptTag = htmlFragment.querySelector('script');
scriptTag.setAttribute('class', 'removeables');
return htmlFragment;
}
$(document).ready(function() {
var response = '<script>alert("hello")<\/script>';
var fragment = updateTags(response);
$(document.body).append(fragment);
$("#delete").on('click', function() {
$('.removeables').remove();
});
});<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="content">
</div>
<button id="delete">remove</button>
</body>
</html>关于javascript - 如何从 DOM 中删除特定的 <script> 和 <style> 标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49991056/
26
4
0
我知道 source 和 . 做同样的事情，如果标题中的其他命令对不一样，我会感到惊讶事情(因为我正在运行 bash 作为我的 shell，$SHELL [script] 和 bash [script
我在尝试启动第一个 super 账本网络时遇到此错误: $ ./byfn.sh -m up Starting with channel 'mychannel' and CLI timeout of '
哪个更好用或者更方便: ... 或 ... 最佳答案 你真的需要类型属性吗？如果您使用的是 HTML5，则不会。否则，是的。 HTML 4.01 和 XHTML 1.0 指定了 type属性是必需的，
哪个更好用或者更方便: ... 或 ... 最佳答案 你真的需要类型属性吗？如果您使用的是 HTML5，则不会。否则，是的。 HTML 4.01 和 XHTML 1.0 指定了 type属性是必需的，
使用此语法包含外部 javascript 文件的正确术语是什么: 是否包含script.js？执行了吗？是链接的吗？是叫吗？我刚刚运行了该文件吗？ 最佳答案 我认为这里最常见的术语是加载外部 Jav
这个问题在这里已经有了答案: 关闭 11 年前。 Possible Duplicate: Why don't self-closing script tags work? 我刚刚发现 HTML 中的
没什么可说的了。我尝试寻找这意味着什么，但找不到。该脚本几个月来一直运行良好，并在 12 小时前停止，没有对其进行任何更改。手动运行显示此错误。 最佳答案 我遇到了同样的问题，我只需从脚本编辑器中单击
我是 Apps 脚本的新手，正在尝试了解使用另一个帐户在一个帐户中运行/触发脚本的基础知识。需要注意的是:我想在访问脚本的用户而不是拥有脚本的用户的情况下运行脚本——以便将运行时间分配给访问的用户。
我是 Apps 脚本的新手，正在尝试了解使用另一个帐户在一个帐户中运行/触发脚本的基础知识。需要注意的是:我想在访问脚本的用户而不是拥有脚本的用户的情况下运行脚本——以便将运行时间分配给访问的用户。
我最近遇到这个问题，我试图在我的 HTML 页面中导入多个 js 文件，如下 - 但我面临的问题是，它只加载第一个 js 文件，而其余的 js 文件没有加载。我还检查了浏览器中的网络部分，剩下的
Duplicate Why don’t self-closing script tags work? 我正在编写一个 ASP.net 页面，它在 JS 文件中有一些用于客户端身份验证的 Javascr
为什么以下行在许多浏览器(mozilla、IE)中不起作用？ 为什么一定要这样设置？ 最近我将我的项目从 XHTML 转换为 HTML5，我遇到了一些小但令人不安的不兼容性。 最佳答案 虽然脚本元
这个问题已经有答案了: Why don't self-closing script elements work? (12 个回答) 已关闭 7 年前。 经过两天的 Angular 与 Webpack
我在任何地方都找不到这个问题的答案；甚至在官方文档中也没有。我已经尝试自己编写代码，但它不起作用，所以它可能无法实现。 在下面的示例中，您可以使用条件颜色进行绘图: //STACKED EMAs
我正在通过串行端口使用 Tera Term 在板上进行一些测试。最近我发现我可以在 Tera Term 中编写一些脚本，所以我一直在做研究以帮助自动化并使测试更容易一些。 我知道 Tera Term
数组在 PineScript 中不可用。 有解决办法吗？有没有人开发过代码，作为数组使用？ 我需要它做什么？我想计算每条趋势线或 S/R 水平的触及次数。 最佳答案 要实现计数器，您可以创建一个变量，
有没有办法创建一个指标来反射(reflect) Pine Script 中股票的当前价格？我需要这个指标，因为我需要在蜡烛关闭之前输入订单(当有特定的交叉时)并且回测数据是逐条提供的。我认为一个指标可
我的网站有一个脚本，如果从移动设备查看页面，格式和样式会发生变化。在网站的 2/3 页上，该脚本效果很好，正如我想要的那样。但是在最后一个上，用于更改格式和样式的脚本运行但未完全运行。我已经尝试从我的
我是否正确，市场上没有直接替代此流程: 在 chrome 插件商店中发布未列出 直接将链接分享给可以使用脚本的人 特别是，这些机制允许我使用我在所有 google dsoc 上编写的脚本。 随着转向市
我有一个简单的 Google Script 发布为具有匿名访问权限的网络应用程序。代码可用 here网络应用程序可用 here . code.gs function doGet() { retur
我是一名优秀的程序员,十分优秀！