Question

我有一些javascript会在页面上创建某种小部件。我将把这个片段给客户，所以我希望他们必须做的很少。

我现在工作的最明显的解决方案看起来像这样：

<div id="divContent"></div>
<script type="text/javascript">
    MakeWidget('divContent');
</script>

Make widget基本上会查找divContent div并用我的widget的html填充它。

有更好的方法吗？你能用脚本标签中的Javascript替换Div的脚本标签吗？

我真的很喜欢它，如果我可以将代码减少到只有MakeWidget函数，它会用函数生成的html替换自己和脚本标记。

编辑 - 我基本上想要在页面上调用MakeWidget函数的地方生成HTML。

Answer 1

您可以使用该脚本标记中的Javascript替换Div的脚本标记吗？

是。到达<script>元素时，假设它不是defer或async脚本，它将是目前为止页面中的最后一个脚本元素。所以你可以说，内联或外部脚本：

<script type="text/javascript">
    (function() {
        var scripts= document.getElementsByTagName('script');
        var script= scripts[scripts.length-1];
        var div= document.createElement('div');
        div.innerHTML= 'Whatever content is going to be inserted';
        script.parentNode.insertBefore(div, script);
    })();
</script>

Answer 2

你必须在某处定义MakeWidget，对吧？据推测，这将是一个外部脚本。为什么不让外部脚本源使用divContent方法将自己附加到window.onload？

这会在您客户的页面上生成此代码：

<script src="http://foo.com/makewidget.js"></script>

您的makewidget.js代码可能如下所示：

window.onload = function() { MakeWidget('divContent') }

其他脚本加载可能存在一些问题，可能还存在一些跨浏览器兼容性问题，但这应该会让您指出正确的方向。

Answer 3

所以你想要一个用div替换自己的脚本元素。

您的初始代码如下：

<div id="divContent"></div>
<script>
MakeWidget('divContent');
</script>

你可以像这样重写它（我正在使用JQuery）：

<script id="scriptContent">
    $('#scriptContent').after('<div id="divContent"></div>');
    MakeWidget('divContent');
    $('#scriptContent').remove();
</script>

我还没试过！

Answer 4

我认为可以按如下方式进行：

<div id="divWidgets">
    <script type="text/javascript">
        MakeWidgets("divWidgets");
    </script>
</div>

最终结果应该是（如果我理解你的描述正确），MakeWidgets将替换DIV的内容，在这种情况下，DIV是脚本本身。

你可以使用自定义html在页面上替换自己的javascript函数吗？

4 个答案: