使用 PHP 在“头”中动态加载 JS

Dynamically Load JS in "Head" using PHP

本文关键字：动态 加载 JS PHP 使用      更新时间：2023-09-26

我正在开发自己的自定义CMS，它允许我创建一小块代码并将它们放置在整个站点上 - Joomla也这样做了。我想做的是，每个代码块可能都有自己的JS文件，这些文件只与该块相关。所以我想使用 PHP 将 JS 动态添加到 head 标签中。现在我在网上找到了这个解决方案，并为它创建了一个类。

<script type="text/javascript">
var script = document.createElement('script');
script.type = "text/javascript";
script.src = "/path/to/pikachoosejs/jquery.pikachoose.js";
document.getElementsByTagName('head')[0].appendChild(script);
</script>

这是PHP版本：

<?php function loadcss($path) { ?>
<script>
var script = document.createElement('script');
script.type = "text/javascript";
script.src = "<?php echo $path; ?>";
document.getElementsByTagName('head')[0].appendChild(script);
</script>
<?php } ?>

现在问题是，如果我添加此代码，它确实将其包含在 Head 标签中。但是，不知何故，皮卡选择不起作用。如果我做一个正常的包括使用 

<script type="text/javascript" src="/path/to/pikachoosejs/jquery.pikachoose.js"> </script>

这是我用来调用脚本的 PHP 函数 -

它确实工作正常。我不确定我哪里出错了。有人可以帮忙吗？

试试这个：

(function () { 
var li = document.createElement('script'); 
li.type = 'text/javascript'; 
li.src= "<?php echo $path; ?>";
li.async=true;
var s = document.getElementsByTagName('script')[0]; 
s.parentNode.insertBefore(li, s); 
})();

您的解决方案是在 HTML 中的某个位置编写一个 script 标记，具体取决于调用函数的位置。它与Joomla有很大不同！特别是因为它依赖于客户端将脚本附加到头部。

为了做一些Joomla！-ish的事情，你需要使用输出缓冲区，或者可能是jQuery的服务器端等价物，比如phpQuery。

对于像您这样的简单情况，我会使用 phpQuery，因为它使 jQuery 编码器的事情变得容易得多。

迷你CMS的简单设置可能是这样的。在开头，但下面，并且不要在代码中使用任何 HTML，除非您明确打算这样做。

phpQuery::newDocumentFileHTML('/path/to/template.html');

它通过将模板文件加载到其内存中来为 phpQuery 创建一个新的上下文，并且是必需的，但可以是不同的变体之一。请参阅基本文档。

附加脚本的函数：

function loadJS( $name ) {
    pq('<script>')->attr('src', $name)->appendTo('head');
}

jQuery中几乎所有可用的方法在phpQuery中也可用。到目前为止，我发现的唯一例外是css方法，因为如果不深入分析链接的样式表，就不可能知道哪些样式将在客户端呈现。

最后，将 DOM 写入您的响应：

echo pq('html');

无论是您当前的方法还是这种方法，jquery.pikachoose.js脚本实际上都应该有效。检查开发人员工具中的资源，查看是否已加载。如果是这样，请检查是否有任何与您的脚本相关的错误阻止它作为 jQuery 插件正确加载。

如果您希望脚本由 PHP 生成，则需要将其放入 PHP 文件中。将文件重命名为 js/getdata.js.php并相应地更新 src。

另一种简单可靠的方法是将脚本标签字符串保存在变量中，例如。

<?php function loadcss($path) { ?>
     $sc = "<script type='text/javascript' src='$path'></script>"; ?>
     document.getElementsByTagName('head')[0].innerHTML += '<?php echo $sc ?>';
<?php } ?>

考虑两件事，你正在得到正确的路径。你真的有一个头牌。如果是，则使用以下代码。

这段代码应该是正确的，但如果你不让它工作......确保此代码正确。.你可以检查你的头部元素（用萤火虫），你会看到。脚本节点将使用此代码编写

var js = document.createElement('script');
js.src = 'http://xxx./yyy.js';
document.getelementsbytagname('head')[0].appendChild();

我认为这是最好的。

相关文章：