如何在 javascript 中放置标签属性 onload 和 onerror？

Question

旧脚本（1）：

document.write('<scr'+'ipt src="http://example.com/script.js?'+Math.random()+'" type="text/javascript" onerror="checkScriptLoaded2();" onload="scriptLoaded2=true;"></scr'+'ipt>');

脚本新（2）：

var sNew = document.createElement("script");
sNew.async = true;
sNew.src = "http://example.com/script.js?"+Math.random();
var s0 = document.getElementsByTagName('script')[0];
s0.parentNode.insertBefore(sNew, s0);

如何把这个标签放到脚本2中才能正常工作。

onerror="checkScriptLoaded2();" onload="scriptLoaded2=true;"

Answer 1

这边。

创建属性并将其添加到脚本元素。

createAttribute() 方法创建一个具有指定名称的属性，并将该属性作为 Attr 对象返回。

attribute.value 属性用于设置属性的值。

element.setAttributeNode() 方法用于将新创建的属性添加到元素。

function checkScriptLoaded2()
{
  alert("Error in loading.")
}

var sNew = document.createElement("script");
sNew.async = true;
sNew.src = "https://example.com/script.js?"+Math.random();


sNew.setAttribute('onerror', 'checkScriptLoaded2();') // Shorthand as suggested by Felix

var att = document.createAttribute("onload"); // Elaborated way 
att.value = "scriptLoaded2=true;"
sNew.setAttributeNode(att)




var s0 = document.getElementsByTagName('script')[0];
s0.parentNode.insertBefore(sNew, s0);

<div>hello</div>

Answer 2

像这样：

sNew.onerror = checkScriptLoaded2;
sNew.onload = function() {
  scriptLoaded2 = true;
};

您可以learn more about this type of event handling on quirksmode.org。基本上，对于元素支持的大多数事件，它是一个 on<eventname> 属性，您可以为其分配一个函数来处理它。

查看 MDN 上的 HTMLScriptElement documentation（尽管它没有列出事件处理程序）。

---

还要注意

var s0 = document.getElementsByTagName('script')[0];
s0.parentNode.insertBefore(sNew, s0);

只有在已经存在另一个 <script> 元素时才有效。如果脚本不必出现在任何特定的地方，那么按照 MDN 的建议进行操作会更安全：

document.head.appendChild(sNew);