欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

使仅仅 某一个页面 加载 某个js css 自己亲自做的 有大用

shiping1 的头像

google  "drupal add js only one page"

 
最方便的方法还是使用 drupal_add_js drupal_add_css 有大用 
function MYTHEME_preprocess_node($vars) {
  if (drupal_get_path_alias("node/{$vars['#node']->nid}") == 'foo') {
     //这是增加 js 
    drupal_add_js(drupal_get_path('theme', 'MYTHEME') . "/js/foo.js");
    $vars['scripts'] = drupal_get_js(); //最好还是加上这一句

  }
    if (drupal_get_path_alias("node/{$vars['#node']->nid}") == 'foo') {
drupal_add_css(drupal_get_path('theme', 'MYTHEME') . "/css/foo.css"); }
}


 来自 http://drupal.stackexchange.com/questions/126/any-way-to-add-css-for-a-single-page-node

//加载js文件 有大用 
drupal_add_js(drupal_get_path('theme', 'mygarlandzhutwo') . "/js/mingxi.js", '', 'footer');
//追加js代码 有大用
drupal_add_js('$("#edit-field-send-person-0-value").attr("readonly","true");', 'inline', 'footer');


 


 仅仅是 http://域名/aa   加载 aa.js 
【高级】[墙内] 地球人(342482840)  13:00:31
为啥不用捏
【新手】[上海]Edxxu(110760117)  13:00:44
你可以把一个js attach到一个render array 只有这个render array显示的时候 才加载js
有很多方法的
【哑巴】MμMa(2035246)  13:01:16
北京的公司
【进阶】[苏州]泪痕_元怜(958186957)  13:01:18
@[墙内] 地球人  不用 drupal_add_js 是有原因的 一言难尽 
【新手】[上海]Edxxu(110760117)  13:01:35
用drupal_add_js也可以实现
【进阶】[苏州]泪痕_元怜(958186957)  13:01:40
我只想 不用 drupal_add_js 
【新手】[上海]Edxxu(110760117)  13:01:41
比较low一点
【高级】[墙内] 地球人(342482840)  13:02:27
是啥原因,分享下吧
【新手】[上海]Edxxu(110760117)  13:02:47
更low的方法 就是override这个页面的template
【进阶】[苏州]泪痕_元怜(958186957)  13:02:59
哦  
【新手】[上海]Edxxu(110760117)  13:03:06
直接 <script></script>
【高级】[墙内] 地球人(342482840)  13:03:09
加模版里算是最方便了
【进阶】[苏州]泪痕_元怜(958186957)  13:03:12
又不想 override这个页面的template
@[上海]Edxxu 说来话长 不浪费大家时间了 
【新手】[上海]Edxxu(110760117)  13:04:09

【新手】[上海]Edxxu(110760117)  13:05:20
其实还有很多方法 看你的页面是怎么生成的了 包含哪些东西
【进阶】[苏州]泪痕_元怜(958186957)  13:05:58
哦 
【新手】[上海]Edxxu(110760117)  13:05:58
还有就是创建一个block 在block里面写 <script></script> 然后指定block只显示在这个页面
【进阶】[苏州]泪痕_元怜(958186957)  13:06:14
@[上海]Edxxu  你这个思路不错 
【新手】[上海]Edxxu(110760117)  13:06:17
这样不用动代码
【高级】[墙内] 地球人(342482840)  13:06:25
不用模版,可以在template.php里加,hook里加,配置区块加,等等
【进阶】[苏州]泪痕_元怜(958186957)  13:06:28
不过 常用的王牌方法 是哪种 
【高级】[墙内] 地球人(342482840)  13:06:32
还是用模版最方便
【进阶】[苏州]泪痕_元怜(958186957)  13:07:12
@[墙内] 地球人  用模板是中国人的方法 感觉外国人 是不这样干的
【新手】[上海]Edxxu(110760117)  13:07:16
你不想写东西 就block离加好了
【高级】[上海]Ivan(552382568)  13:07:38
谁要找工作 我这边要找一位 工作地点 上海南京东路
【高级】[墙内] 地球人(342482840)  13:07:42
没有最好的方法,只有最合适的
【新手】[上海]Edxxu(110760117)  13:07:48
个人感觉好一点的就是attch到一个render array里面
【高级】[墙内] 地球人(342482840)  13:07:48
模版加也没啥不好的 



This user never replied to my question, and since I'm sure that this page will be found by others searching for the same question, I'm going to give a few examples based on different page generation methods that I listed above:

1) A node:
Solution - implement hook_node_view() and add your script to the $node->content array as follows:

<?php
function my_module_node_view($node, $viewmode, $langcode)
{
  $node->content['#attached']['js'][] = array
  (
    'type' => 'file',
    'data' => drupal_get_path('module', 'my_module') . '/my_script.js',
  );
}
?>

2) A template. For example, the user may have page--front.tpl.php.
Solution - We need to implement the preprocess hook for the template, in our template.php file. The actual function name will be THEME_NAME_preprocess_TEMPLATE(). In the above case, the template is 'page', so we want to implement THEME_NAME_preprocess_page() as follows:

<?php
function my_theme_preprocess_page(&$vars)
{
  if($vars['is_front'])
  {
    drupal_add_js(drupal_get_path('theme', 'my_theme') . '/my_script.js');
  }
}
?>

3) A custom page created with hook_menu():
Solution - when creating a page with a callback path, using hook_menu(), it's best to return a render array, so that the page can be overridden further down the line. We can also attach our script to this render array. Example:

<?php
// Create a path using hook_menu()
function my_module_menu()
{
  $menu['my_path'] = array
  (
    'title' => 'My Page',
    'callback path' => 'my_page_callback',
    'access callback' => TRUE,
  );
  return $menu;
}

// Our callback path
<?php
function my_page_callback()
{
  $page_contents = t('These are the contents of my page');
  $page_array = array
  (
    '#markup' => $page_contents,
    '#attached' => array
    (
      'js' => array
      (
        array
        (
          'type' => 'file',
          'data' => drupal_get_path('module', 'my_module') . '/my_script.js',
        ),
      ),
    ),
  );

  // return the render array with the attached JS
  return $page_array;
}
?>

4) A view
Solution - implement hook_preprocess_views_view() and attach the js for your view and view name. In this hook, the view information is stored in $vars['view'], and we want to look at two items in particular, the view name, and the view current_display. The view name is the name of the overall view, when creating a new view, as it's listed on the views list page. The current_display is the name of the display being used inside that view. By default, it will be page_X (for a page) where X is the number of the page created. I generally override the name of the current_view however to something more descriptive. But I will use page_1 in this example:

<?php
function my_theme_preprocess_views_view(&$vars)
{
  if($vars['view']->name == 'my_view' && $vars['view']->current_display == 'page_1')
  {
    $vars['view']['#attached']['js'][] = array
    (
      'type' => 'file',
      'data' => drupal_get_path('theme', 'my_theme') . '/my_script.js',
    );
 }
}
?>

I have attached a file in each of the above examples, but in all cases, I could have attached some settings, an external script, or inline JS as well.

Think the Drupal forums suck? Add your agreement here:https://www.drupal.org/node/2641072

Geo Geektress’s picture

Dear Jaypan,

Thanks so much for working on this with me. Moving forward with my Javascript problem. I was able to include my raphael.js file in by adding to my .info file:

scripts[] = js/raphael.js

I checked my content type and it is an article which I assume makes it a node.

I have to add this javascript to the header of the file. My image has an ID of bee.

window.onload = function () { var src = document.getElementById("bee").src, angle = 0; document.getElementById("holder").innerHTML = ""; var R = Raphael("holder", 640, 480); R.circle(320, 240, 200).attr({fill: "#000", "fill-opacity": .5, "stroke-width": 5}); var img = R.image(src, 160, 120, 320, 240); var butt1 = R.set(), butt2 = R.set(); butt1.push(R.circle(24.833, 26.917, 26.667).attr({stroke: "#ccc", fill: "#fff", "fill-opacity": .4, "stroke-width": 2}), R.path("M12.582,9.551C3.251,16.237,0.921,29.021,7.08,38.564l-2.36,1.689l4.893,2.262l4.893,2.262l-0.568-5.36l-0.567-5.359l-2.365,1.694c-4.657-7.375-2.83-17.185,4.352-22.33c7.451-5.338,17.817-3.625,23.156,3.824c5.337,7.449,3.625,17.813-3.821,23.152l2.857,3.988c9.617-6.893,11.827-20.277,4.935-29.896C35.591,4.87,22.204,2.658,12.582,9.551z").attr({stroke: "none", fill: "#000"}), R.circle(24.833, 26.917, 26.667).attr({fill: "#fff", opacity: 0})); butt2.push(R.circle(24.833, 26.917, 26.667).attr({stroke: "#ccc", fill: "#fff", "fill-opacity": .4, "stroke-width": 2}), R.path("M37.566,9.551c9.331,6.686,11.661,19.471,5.502,29.014l2.36,1.689l-4.893,2.262l-4.893,2.262l0.568-5.36l0.567-5.359l2.365,1.694c4.657-7.375,2.83-17.185-4.352-22.33c-7.451-5.338-17.817-3.625-23.156,3.824C6.3,24.695,8.012,35.06,15.458,40.398l-2.857,3.988C2.983,37.494,0.773,24.109,7.666,14.49C14.558,4.87,27.944,2.658,37.566,9.551z").attr({stroke: "none", fill: "#000"}), R.circle(24.833, 26.917, 26.667).attr({fill: "#fff", opacity: 0})); butt1.translate(10, 181); butt2.translate(10, 245); butt1[2].click(function () { angle -= 90; img.stop().animate({transform: "r" + angle}, 1000, "<>"); }).mouseover(function () { butt1[1].animate({fill: "#fc0"}, 300); }).mouseout(function () { butt1[1].stop().attr({fill: "#000"}); }); butt2[2].click(function () { angle += 90; img.animate({transform: "r" + angle}, 1000, "<>"); }).mouseover(function () { butt2[1].animate({fill: "#fc0"}, 300); }).mouseout(function () { butt2[1].stop().attr({fill: "#000"}); }); // setTimeout(function () {R.safari();}); }; I created a file called rotate.js without the

tags and placed it in my js folder.

So would I add your script for a node to my template.php? Or create a separate php file? Do you think it will work?

 

<?php
function my_module_node_view($node, $viewmode, $langcode)
{
  $node->content['#attached']['js'][] = array
  (
    'type' => 'file',
    'data' => drupal_get_path('module', 'my_module') . 'js/rotate.js',
  );
}
?>

Thanks for your help again.

Regards gchalker

Jaypan’s picture

First, you most likely don't want raphael.js being included in your .info file, as it will then be included on every page load. Unless you are using it on every page load, this is overkill. Therefore you should include it at the same time, in the same manner, as rotate.js. And on that note, I'd use this:

 

<?php
function my_module_node_view($node, $viewmode, $langcode)
{
  if($node->type == 'article')
  {
    $node->content['#attached']['js'][] = array
    (
      'type' => 'file',
      'data' => drupal_get_path('module', 'my_module') . 'js/raphael.js',
    );
    $node->content['#attached']['js'][] = array
    (
      'type' => 'file',
      'data' => drupal_get_path('module', 'my_module') . 'js/rotate.js',
    );
  }
}
?>

But please note that this will add the file to every article node. If you want to add it only for a specific article, then you need to get the nid of that article, and instead of checking $node->type, you would check $node->nid.

Think the Drupal forums suck? Add your agreement here:https://www.drupal.org/node/2641072

dawehner’s picture

Or, you can add the javascript like this in your module:

  if ($node->nid == 684) { //Looking for the specific node
    drupal_add_js(drupal_get_path('module', 'my_module') . '/js/myscript.js');
  }

For some reason,
$node->content['#attached']['js']
didn't work for me.
Jaypan’s picture

What hook were you adding it in? Also, are you using D7 or a different version?

Think the Drupal forums suck? Add your agreement here:https://www.drupal.org/node/2641072

Jaypan’s picture

Two more things:

1) In Drupal, you do not use window.onload, you use Drupal.behaviors. Read more about this, and the Drupal 7 JavaScript API here:https://drupal.org/node/751744
2) You can wrap your code in <code></code> tags, making it easier to read. If it's PHP, you can wrap your code in <?php ?> tags.

Think the Drupal forums suck? Add your agreement here:https://www.drupal.org/node/2641072

Geo Geektress’s picture

Thanks Jaypan,

Let me work on this tomorrow. Late here on the east coast. I seem to understand what I need to do, yet I want to spend time reading the 751744 so I understand it. I will do that tomorrow.

It is javascript, so Drupal likes <code> instead of <script></script>?
Also, in what file do I put the php script in?

Can you tell me where you set the alerts so that I get an email when someone replies to my threads. I do remember the capabilities of doing so. Or was that in google.api?

Good night! And thanks again.

This will be awesome if I can get it to work.

Geo Geektress’s picture

Dear Jaypan,

http://www.gchalker.com/

I think everything is in the right place now. But rotate.js is still not coming in. I have this is template.php:

function my_module_node_view($node, $viewmode, $langcode)
{
if($node->type == 'article')
{
$node->content['#attached']['js'][] = array
(
'type' => 'file',
'data' => drupal_get_path('module', 'my_module') . 'js/raphael.js',
);
$node->content['#attached']['js'][] = array
(
'type' => 'file',
'data' => drupal_get_path('module', 'my_module') . 'js/rotate.js',
);
}
}

Rotate.js reads:

(function ($) {
Drupal.behaviors.my_module = {
attach: function () {
var src = document.getElementById("bee").src,
angle = 0;
document.getElementById("holder").innerHTML = "";
var R = Raphael("holder", 640, 480);
R.circle(320, 240, 200).attr({fill: "#000", "fill-opacity": .5, "stroke-width": 5});
var img = R.image(src, 160, 120, 320, 240);
var butt1 = R.set(),
butt2 = R.set();
butt1.push(R.circle(24.833, 26.917, 26.667).attr({stroke: "#ccc", fill: "#fff", "fill-opacity": .4, "stroke-width": 2}),
R.path("M12.582,9.551C3.251,16.237,0.921,29.021,7.08,38.564l-2.36,1.689l4.893,2.262l4.893,2.262l-0.568-5.36l-0.567-5.359l-2.365,1.694c-4.657-7.375-2.83-17.185,4.352-22.33c7.451-5.338,17.817-3.625,23.156,3.824c5.337,7.449,3.625,17.813-3.821,23.152l2.857,3.988c9.617-6.893,11.827-20.277,4.935-29.896C35.591,4.87,22.204,2.658,12.582,9.551z").attr({stroke: "none", fill: "#000"}),
R.circle(24.833, 26.917, 26.667).attr({fill: "#fff", opacity: 0}));
butt2.push(R.circle(24.833, 26.917, 26.667).attr({stroke: "#ccc", fill: "#fff", "fill-opacity": .4, "stroke-width": 2}),
R.path("M37.566,9.551c9.331,6.686,11.661,19.471,5.502,29.014l2.36,1.689l-4.893,2.262l-4.893,2.262l0.568-5.36l0.567-5.359l2.365,1.694c4.657-7.375,2.83-17.185-4.352-22.33c-7.451-5.338-17.817-3.625-23.156,3.824C6.3,24.695,8.012,35.06,15.458,40.398l-2.857,3.988C2.983,37.494,0.773,24.109,7.666,14.49C14.558,4.87,27.944,2.658,37.566,9.551z").attr({stroke: "none", fill: "#000"}),
R.circle(24.833, 26.917, 26.667).attr({fill: "#fff", opacity: 0}));
butt1.translate(10, 181);
butt2.translate(10, 245);
butt1[2].click(function () {
angle -= 90;
img.stop().animate({transform: "r" + angle}, 1000, "<>");
}).mouseover(function () {
butt1[1].animate({fill: "#fc0"}, 300);
}).mouseout(function () {
butt1[1].stop().attr({fill: "#000"});
});
butt2[2].click(function () {
angle += 90;
img.animate({transform: "r" + angle}, 1000, "<>");
}).mouseover(function () {
butt2[1].animate({fill: "#fc0"}, 300);
}).mouseout(function () {
butt2[1].stop().attr({fill: "#000"});
});
}
};

})(jQuery);

Yet still no buttons. It doesn't even look like rotate.js is loading.
Am I getting any closer?

FYI... this will be the only article that I create on my site.

Thanks again for your help!

g. :>)

Jaypan’s picture

If this is your actual code:

<?php
function my_module_node_view($node, $viewmode, $langcode)
?>

Then you will need to change 'my_module' to the machine name of your theme. You will also need to clear your cache.

I would also suggest changing this:

(function ($) {
Drupal.behaviors.my_module = {
attach: function () {

To this:

(function ($) {
Drupal.behaviors.my_module = {
attach: function () {
  alert("script loaded");

This will let you know if your script has properly loaded, helping you figure out where you need to debug (if this alert does not appear, then the script is not loaded).

Think the Drupal forums suck? Add your agreement here:https://www.drupal.org/node/2641072

dawehner’s picture

Hi, i wanna add a js file to a view page. I tried using the last example you show. I created a new module, and included

<?php
function my_theme_preprocess_views_view(&$vars)
{
  if($vars['view']->name == 'my_view' && $vars['view']->current_display == 'page_1')
  {
    $vars['view']['#attached']['js'][] = array
    (
      'type' => 'file',
      'data' => drupal_get_path('theme', 'my_theme') . '/my_script.js',
    );
 }
}
?>

in the my_module.module file, but it doesnt work. Could you help me to get this work?

Thanks in advance!

Jaypan’s picture

You'll need to change the following:
my_theme => Machine name of your module
my_view => Machine name of your view
page_1 => Machine name of the display of the view you want to show
drupal_get_path('theme', 'my_theme') => drupal_get_path('module', MODULE MACHINE NAME) (change MODULE_MACHINE NAME)
my_script.js => name of your script

Think the Drupal forums suck? Add your agreement here:https://www.drupal.org/node/2641072

dawehner’s picture

Yes, i already did that, i was showing the above code just as an example. But it's still not working.

Jaypan’s picture

Must be something else wrong with your code then.

Think the Drupal forums suck? Add your agreement here:https://www.drupal.org/node/2641072

dawehner’s picture

I think i know what is wrong.
$vars['view'] is an object.
Yet later in the code the attach is done by
$vars['view']['#attached']
Which throws PHP Fatal error: Cannot use object of type view as array

dawehner’s picture

Well, you can add your js path to the .info file.
Ex : scripts[] = js/yourJS.js

You have to write your code in a such a way, so that your function will work as per your need.

Jaypan’s picture

That will add the script to every page. This user wants to attach the scripts to a single page.

Think the Drupal forums suck? Add your agreement here:https://www.drupal.org/node/2641072

dawehner’s picture

Then try to use the below function.
drupal_add_js("PATH OF YOUR JS FILE")

dawehner’s picture

Use this to "include" the .JS file into your page--xxxx.tpl.php

drupal_add_js('sites/all/themes/yourtheme/js/file.js');

Then you can use it 'as normal'; for example, if you have a function in file.js that is called "eatmybadger()", then you can assign it either using jQuery or hard-code into the HTML like so:-

<img onclick='eatmybadger();' src='' .....

As for the other questions on adding an ID to your image, well, it all depends on how you get the image in the first place.
For my galleries, I have a simple PHP loop embedded into the page--xxxxtpl.php page which looks something like this:-

 

forech ($imageset as $image_id => $image_data) {
  echo '<img
    onclick="
      eatmybadger(' . $image_data -> image_filename . ');
    "
    src="' . $image_data -> image_source . '"
    ><br />';
}

I hope this helps!

Jaypan’s picture

Adding the script in page.tpl.php will include the script on every page. The question at hand is how to include the script on a single page.

Think the Drupal forums suck? Add your agreement here:https://www.drupal.org/node/2641072

dawehner’s picture

Sorry, wasn't being clear ... I don't mean include it on page.tpl.php but on his appropriate template page; for example on my configuration, I have a page called page--archive-gallery.tpl.php and the drupal_add_js function that I suggested is used on that page; the code included in my JS file is then only available/called on that page, which is what the OP desires.

Geo Geektress’s picture

So I need to put this script in:

drupal_add_js('sites/all/themes/likeable/js/rapheal.js');

Somewhere in my page.tpl.php file? The mandala page is my home page when you land on www.gchalker.com and a page call /mandala.

That will include the rapheal.js on the mandala page only?
I will have to take it out of my .info file.

Now for the header script listed in a reply above.
Would I do the same in the page.tpl.php file?

Oy vey. This is complicated!

Thanks for your help though! I appreciate it!

Regards, gchalker

dawehner’s picture

The Meta Tags module tucks all sorts of things in the head of a single node. (Title, description, canonical, rel="prev", etc...)

Why can't that same module just be configured to offer a feature where there's an input box where you can place any text you want for insertion into the head portion of the html, with you just being responsible for it having correct syntax? So much about Drupal is like doing your job handcuffed. Yeah, you can do it, it's just incredibly inconvenient.

https://www.drupal.org/node/1993228 这个页面也有不错的方法


普通分类: