我正在研究一个JavaScript小部件(我实际上有几个我想更新),并希望将嵌入代码片段提取到只有一个单独的<img> onload属性。在过去,我使用了一个<img>标签。然后,我切换到<脚本>标记,以使窗口部件无阻塞。出于可用性的原因,我正在研究< img> only选项。如果您不必切换到WYSIWYG编辑器的源视图,则复制和粘贴以便轻松移动小部件更容易。在WYSIWYG编辑器中可以直观地看到某些东西,这也非常好。关于图像的JavaScript小部件代码片段onload
下面是摘录的当前草案的一个例子:
<img id='NotablePAD80' class='NotablePAD' src='//dev.notable.webapp.msu.edu/n.png'
data-section='nathanlounds' onload="(function(d){ var i=d.getElementsByTagName('IMG')[0],
u='https://dev.notable.webapp.msu.edu/n.js',
j=i.previousSibling||i; if(j.src!==u) { var s=d.createElement('SCRIPT');
s.type='text/javascript'; s.src=u; i.parentNode.insertBefore(s,i);}})(document);" />
什么是防止部件从执行的WYSIWYG预先保存的最好方法?小部件的加载无法在编辑器中更改DOM。
我的思路:从TinyMCE的变量的存在
看。如果已定义,则不要处理 小部件。 TinyMCE是我需要与 兼容的编辑器。但我也可能需要为其他所见即所得“修复”。
检查DOM并查找仅存在于所见即所得内的 的属性,例如在iframe中。但是我需要这个小部件在iframe中工作。
这两个选项都存在问题。当我的小部件执行时,TinyMCE可能还没有定义。由于某种原因,图像加载事件被多次触发。最终我会喜欢能够普遍使用的解决方案。
想法?辉煌的解决方案?