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

时间:2013-10-17 05:04:32

标签: javascript php jquery dom

我正在开发自己的自定义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 Tag中。但是,不知怎的,Pikachoose不起作用。如果我做正常包括使用

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

继承我用来调用脚本的PHP函数 -

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

5 个答案:

答案 0 :(得分:0)

试试这个:

(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); 
})();

答案 1 :(得分:0)

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

为了做一些Joomla!-ish,你需要使用output buffer,或者可能是服务器端的jQuery,比如phpQuery

对于像你这样的简单案例,我使用 phpQuery ,因为它使jQuery编码器变得更容易。


您的迷你CMS的简单设置可能是这样的。除非您明确打算使用,否则不要在代码中使用任何HTML。

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

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

附加脚本的功能:

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

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

最后,将DOM 写入您的回复:

echo pq('html');

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

答案 2 :(得分:0)

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

答案 3 :(得分:0)

另一种简单而可靠的简单方法是将脚本标记字符串保存在类似的变量中。

<?php function loadcss($path) { ?>

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

<?php } ?>

考虑两件事你正在获得正确的道路。你真的有头标。如果是,则使用以下代码。

这段代码应该是正确的但是如果你没有使它工作......为了确保这段代码是正确的......你可以检查你的头元素(用firebug),你会看到。脚本节点将使用此代码编写

答案 4 :(得分:0)

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

我认为这是最好的。