注入<脚本>标签给它一个合适的位置

inject <SCRIPT> tag giving it a proper location

本文关键字：一个 位置 脚本 lt gt 标签 注入      更新时间：2023-09-26

用例：使用"遗留"PHP文件，我想拦截提交和链接，这样它们就可以替换给定div的内容，而不是重写整个页面。所以我使用JQ加载来加载PHP文件。但这个注入的PHP生成的东西还必须包含JS/JQ代码，以拦截未来的提交和链接。在页面上使用一个这样的DIV做这件事没有问题。

如果你想在一个页面上有多个DIV都这样做，你需要SCRIPT，当它们运行时（它们都运行同一个"xxx.js"文件），能够检测到它们的父DIV。因此，这个想法是有多个SCRIPT，都调用"xxx.js"，每个SCRIPT都包含在其引用DIV中。

  • 我已经尝试合并{SCRIPT src='xxx.js'}标记，以便它由加载的PHP文件生成
  • 我还尝试过在从load（）成功返回时调用{SCRIPT src='xxx.js'}，即使用getScript（）
  • 同样在从load（）返回时，我尝试append（）在我选择的DIV末尾附加字符串"｛SCRIPT src='xxx.js'｝｛/SCRIPT｝"

问题是，对于这样一个注入的SCRIPT，它似乎总是证明父级是HEAD，并且它没有兄弟元素：即，当你去的时候：

var this_js_script = $( document.currentScript );
var script_parent = this_js_script.parent();

（注意，我还尝试了这里最流行的答案中列出的其他技术，试图从"内部"访问SCRIPT元素）

然后证明，当脚本文件运行时，不可能找到它的位置，从而获得对其DIV（理论上是其父级）的引用。

可能有人知道我在说什么，并且有解决方案！另一方面，有人可能会让我做一个JS Fiddle。我从来没有做过，我想这不会是最简单的。

我想我有一个解决方案。

发生的情况是，遗留代码中的函数调用主函数。main函数将调用方的函数体作为字符串获取，然后查找页面上的所有script对象，试图查看它是否可以将此字符串与其中任何对象匹配。如果找到匹配项，则会高亮显示父div。

请注意，如果调用函数是匿名的，我认为这将不起作用。

.code-block
{
  border: solid 1px #000;
  width: 100px;
  height: 100px;
  border-radius: 5px;
  float: left;
  margin: 5px;
}
.johnny
{
  border-color: #f00;
}
<script>
  function main(param)
  {
	var script = arguments.callee.caller.toString();
	var scripts = document.getElementsByTagName("script");
	for(var i = 0; i < scripts.length; ++i)
	{
	  if(typeof scripts[i].parentElement != "undefined")
	  {
		if(scripts[i].innerText.indexOf(script) != -1)
		{
		  scripts[i].parentNode.className = scripts[i].parentNode.className + " johnny";
		}
	  }						
	}
  };
</script>
<div class="code-block">
  <script>
	function doSomething(){}
  </script>
</div>
<div class="code-block">
  <script>
	function doSomethingElse(){}
  </script>
</div>
<div class="code-block">
  <script>
	function doSomethingRandom(){}
  </script>
</div>
<div class="code-block">
  <script>
	function heresJohnny(){main("");}
  </script>
</div>
<script>
  heresJohnny();
</script>

我认为Hayko Koryun的方法很好。

最后，我找到了两种重新设计问题的方法，避免了将脚本标记放在特定位置的需要。

其中一个涉及以相当巧妙的方式传递参数（Naeem Sarfraz的回答）。

但事实上，最终，我所做的是设计它，使单个脚本在JQ load（）拦截提交成功返回后，最终运行自己的main（）函数。。。因此，我避免了脚本标记实际位于何处的问题，并倾向于使用JQ"框架"来处理所有内容，而不是将控制权"交给"PHP代码。

相关文章：