Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/412.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
有没有办法包装整个javascript,使其仅在特定的HTML ID上运行?_Javascript_Html - Fatal编程技术网

有没有办法包装整个javascript,使其仅在特定的HTML ID上运行?

有没有办法包装整个javascript,使其仅在特定的HTML ID上运行?,javascript,html,Javascript,Html,我继承了一个第三方Javascript——在缩小后大约有7000行——当点击链接时,我需要使用它来打开和关闭一个内容面板。当我将HTML和js文件导入CMS(DNN)中的内容模块时,它可以正常工作,但不幸的是,当在移动设备上查看页面时,它会破坏引导汉堡菜单 我既没有时间也没有JS技能来精确计算7000行脚本是如何工作的,我实际上需要哪些位,然后调整它们,使它们只做我需要的事情,而不会影响菜单 我希望有一种方法可以包装整个脚本,使其只适用于HTML的特定区域,而不适用于菜单区域。我可以很容易地为包

我继承了一个第三方Javascript——在缩小后大约有7000行——当点击链接时,我需要使用它来打开和关闭一个内容面板。当我将HTML和js文件导入CMS(DNN)中的内容模块时,它可以正常工作,但不幸的是,当在移动设备上查看页面时,它会破坏引导汉堡菜单

我既没有时间也没有JS技能来精确计算7000行脚本是如何工作的,我实际上需要哪些位,然后调整它们,使它们只做我需要的事情,而不会影响菜单

我希望有一种方法可以包装整个脚本,使其只适用于HTML的特定区域,而不适用于菜单区域。我可以很容易地为包含代码的div分配一个ID,我希望它在其中运行

那么有没有办法做到这一点——在脚本开始时测试当前元素是否与我分配的ID匹配,如果它确实启用了整个脚本中的所有函数,如果没有,则什么也不做

阅读初始回复后更新…
可在以下位置查看违规代码:https://dnnplaypen.epicservices.com.au/application
JS文件(未统一版本)可在以下位置找到:https://dnnplaypen.epicservices.com.au/portals/0/scripts/main.unmin.js -我相信它实际上可能是一个完整的引导JS实现,这可能解释了冲突。
这是HTML的相关部分

土木结构内部(CIM)进入者

(在民用行业工作,管理一名或多名人员,或具有民用大学资格,如领导人员、现场主管、工程师、项目经理、首席执行官)

您将回答一些有关您的资格和就业详细信息的问题,以确认您的资格

学生

(至少有50%的时间在大学学习民事相关课程)

请将当前的入学文件作为证据

附属公司,即服务于行业的供应链的一部分

可能

首先,点击打开和关闭一个元素不需要7行代码,更不用说7000行了。拒绝调查该代码是玩忽职守。在不知道它的功能的情况下把它扔进应用程序是不负责任的

其次,最好使用DevTools跟踪单击事件。在Chrome中打开Sources面板,在Firefox中打开Debugger面板。在靠近顶部的右侧,有一个暂停图标。单击该按钮,然后单击网页中切换内容的部分。如果幸运的话,调试器将停止对toggle代码路径中第一条语句的执行,您可以也应该单步执行

第三,我们将使用的策略是将整个代码块包装在一个函数中,该函数公开了domapi的假版本。这段7k的神秘代码最终使用了一些基本的DOM方法来识别和操作相关元素。您的目标是创建该API的假版本,该版本只返回您关心的特定元素。您将向所讨论的元素添加一个ID或其他标识属性,然后在神秘代码调用API时返回该元素(它将认为该API是真实的API)

下面是一个简单的例子:

//首先,让我们了解您希望神秘代码看到的一个元素
const elementThatShouldToggle=document.getElementById('target-element'))
//其次,构造一个对象,该对象提供与实际文档提供的方法同名的方法
常量伪值={
//通常,document.getElementById接受一个参数
//您的伪版本将忽略该参数,只返回内容el
getElementById:()=>应该切换的元素,
//您可能需要模拟几个DOM访问器方法
querySelector:()=>应该切换的元素,
querySelectorAll:()=>[应切换的元素]
}
//第三:将神秘代码包装在一个函数中,该函数使用变量阴影来掩盖真实的DOM,并替换您的伪DOM
(功能沙盒(文档){
/*在这里粘贴7000行神秘代码*/
})(伪造)
这种方法有缺点:

  • 您需要为神秘代码使用的每个DOM方法创建假版本;这将要求您运行应用程序数次,并查找异常。对于每个异常,您都需要研究堆栈跟踪,以识别任何涉及的DOM方法,然后创建返回安全值的模拟
  • 如果神秘代码使用与您喜欢的代码相同的DOM方法,那么您的伪API实现就必须更智能一些。您可能需要在伪方法中设置分支行为,在某些情况下返回真实元素,在所有其他情况下返回安全值。同样,这将是一个猜测和测试事件
  • 一旦神秘代码掌握在真正的DOM节点上,它就可以使用该节点上的API访问文档的其余部分。这可能不是一个不断演变的威胁,因此,在您提供给神秘代码的元素上模拟domnodeapi就足够了
  • 在神秘代码中可能会有一些调用,它们做了一些可怕或糟糕的事情,但没有使用您正在研究的API。如果你没有采取任何措施来检测或防止这种情况,那么坏东西就会发生,将这些代码注入你的应用程序也会注入坏东西
你怎么知道你做了足够的猜测和测试?嗯,因为你拒绝研究7000行代码,所以真的没有办法确定。据我们所知,有一个
setTimeout