JavaScript in a WordPress post - javascript

How can I add
<a href="javascript:function foo(){alert('hi');}" title="alert">
Drag to your bookmarks bar
</a>
to my WordPress post?
I built a bookmarklet and I want to pass it through my blog, but WordPress is stripping out the javascript from my post when I save it.

Javascript in WordPress Single Pages and Posts
<script type="text/javascript">
<!--
// your code
//--></script>
Source:
https://codex.wordpress.org/Using_Javascript

I have no issues embedding that code in the HTML editor on my wordpress site. There is a problem with your javascript code- that defines a function, but never calls it. I have
Drag to your bookmarks bar
in a post, and I get the alert when click, as well as the bookmarklet.

The issue is likely to be caused at the browser end. Chrome's XSS was the problem for me and I solved it by adding the line header ("X-XSS-Protection: 0"); to wp-blog-header.php in the root folder of my installation. This may not be ideal as it applies across the whole site. It would probably be better to add it where it would only apply to the post/page which needs to render the bookmarklet.

This is old, but still relevant with Version 4.9.5 for wordpress, so I answer with my solution for this:
Wordpress filters out any Javascript you use in your Posts or pages, that is why your code gets lost. I did the following steps to add a "javascript:" Link:
Add the Link you want to your post, use "#" as the href and add a id to the tag (in Text-Mode of the Editor):
This is my JS Link
Install a Custom Javascript Plugin. I used Simple Custom CSS and JS
Add the Javascript you want with help from the plugin:
jQuery(document).ready(function( $ ){
function yourFunction() {
alert("It works");
}
jQuery('#idOfYourLink').on("click", yourFunction);
});
The important part is adding the on-Handler to the Link you want to use. Now the Javascript is loaded right after the page got loaded. And a click on the link will call the function yourFunction

I guess that wordpress editor is used to work with textual data/content. So, to add your js you can find plugin for adding custom js. Also you can add a Custom field to the posts.
Let it be "custom_js" - the name of a field that would contain js code. And then edit theme post temlate, adding "echo" of custom_js.
<?php
//single.php
echo get_post_meta( get_the_ID(), 'custom_js');
?>

Related

Js and wordpress help...where does it go?

So ive been putting off using js for a while because everytime I try to figure it out I get more confused, but now I really need it for a site im working on...
I want to hide the page until everything loads (so you don't see elements moving/jumping into place.
I've found various bits on here and around the web, but everytime I go to place the code anywhere that I feel it should go, I get errors.
take this for example:
window.onload=function() {
document.getElementById('loading-mask').style.display='none';
}
Ive tried going to the functions.php file and adding the js code i've found on the web but always get an error. So where do I copy the code for this, so it affects the CSS ive added?
In wordpress, you need to use a plugin to help you insert your javascript/jquery
Login to wordpress
Go to plugins>>add new
Search for Insert Headers and Footers plugin
Install and activate
Then launch the plugin and insert your javascript.
You will need to select the location of your javascript, either in the tag or just before the closing
When you add javascript to a wordpress website, you want to do it in one of two ways. You can either do it using a hook which is essentially a 'spot' in the code you wish to add to.
This can be done by placing the following in your functions.php
add_action('wp_head', 'wp_54885300_add_js_to_header');
function wp_54885300_add_js_to_header(){ ?>
<script>
window.onload=function() {
document.getElementById('loading-mask').style.display='none';
}
</script>
<?php
}
Alternatively, if you find yourself needing to place lots of javascript into your website, you may wish to link to an external javascript file. This can be done with wp_enqueue_script().
Place the following in your functions.php file to enqueue an external stylesheet to your website.
add_action( 'wp_enqueue_scripts', 'wp_54885300_enqueue_script' );
function wp_54885300_enqueue_script(){
wp_enqueue_script('anyname', 'path-to-file.js', array(''), 'version', false );
}
As others have pointed out, what you are trying to do by hiding everything until the window has completely loaded may not be a good idea for a number or reasons.
But, atleast to the best of my knowledge, this ^^ is the proper way to include JS into a wordpress installation without depending on a plugin to get you started.

Need Help in Integrating Javascript with Wordpress

I have wordpress account for blogging. Recently I have opted for PopUpAds. I have the javascript code with me which I received from PopUpAds.
Can any one please tell me how to integrate this code into wordpress??
Any informative links will also be very helpful.
Thank You In advance.
It might be the safest ( but not the best ) way to install the plugin which allows you to add inline javascript code.
I.e. something like this - https://wordpress.org/plugins/tc-custom-javascript/
Also, if you can edit functions.php file within your active theme, the quickest way is to add a patch of code there:
<?php //add opening php tag only if there is closing tag at the end of functions.php file
function pop_up_ads_script() {
?>
<script type="text/javascript">
//your script from PopUpAds goes here
//check if PopUpAds code includes also script tags, then avoid adding duplicate tags
</script>
<?php
}
add_action( 'wp_footer', 'pop_up_ads_script' );
For this approach, be careful when editing and saving functions.php, since you might cause error due to bad syntax or typo, so first check if php tags. I
would suggest to do this via FTP access, rather than through built-in WordPress file editor.
Using a Wordpress plugin that lets you insert arbitrary HTML code as a shortcode is the best way to go IMO. That way the external code doesn't mess with the wysiwyg editor. I use this plugin: https://en-ca.wordpress.org/plugins/insert-html-snippet/
If the JavaScript code should be added to the head section of your page, there are plugins that do that as well.
Check out this useful blog post for adding external JS and CSS to Wordpress: http://blog.dynamicdrive.com/add-custom-javascript-css-wordpress/

Wordpress- Add script directly to page

How can I add my script directly to my page instead of putting it in <head> or <footer>? For example,
<div>
My script here
My html
My html
</div>
Thanks!
What you are trying to achieve is not the WordPress way and is not advised but it can be done ... that's for sure.
The normal way how to do this (is to include/enqueue the js or css file, using wp_enqueue_style function to enqueue css files and wp_enqueue_script to enqueue js files. Proper documentation on how to use those functions can be found on the WordPress Coding reference guide if you search on the internet.
If you want to add your script just to one of your pages/posts, etc ... you can do the old way by inserting the script tag inside the post like this:
< script scr="script-src">< /script>
if the script is not external, is just some small functionality you want to add then you can simply use:
< script>alert('hello world');< /script>
These scripts cant be added on the backend side ... they need to be added on the theme's code ...
Remove all extra spaces i had to add here because of the script tags being filtered for security measures.
Hope i have helped you to achieve what you wanted.
Its the same, use
<script>
xxxxxxx
</script>

Adding javascript to moodle assignment page

I am working on a page in moodle that allows you to edit submissions. There is a tinymce editor that saves changes to a submission using a save button.
I am looking to automate the saving using javascript. I have my js code, but i am not sure of how to include the javascript on the page.
Url is like this: www.somewebsite.com/mod/assign/view.php?id=1234&action=editsubmission
I am new to moodle and php so any help is appreciated
In Moodle 2.0 this is used $PAGE->requires->js().
Make $PAGE available to your code by doing:
require_once($CFG->libdir . '/pagelib.php');
global $PAGE;
Add your code:
$PAGE->requires->js( new moodle_url($CFG->wwwroot . '/mod/mymod/script.js') );
It is required to put moodle_url() around your path!
You can add JavaScript to the Additional HTML in Moodle
As it is HTML, you will need to enclose your JavaScript in <script> tags. You can use jQuery or JavaScript. Be sure to target the specific elements you want, and not to affect other pages, as this will add the script to every page in your Moodle instance.
The benefit of this approach is that you don't need to update the view.php file every time you upgrade Moodle.
placed this in the view.php file:
$PAGE->requires->js( new moodle_url($CFG->dirroot . '/mod/assign/myscript.js'));

Drupal display 3rd party content with script

I am trying to add this script tag, which will display some 3rd party content, to my drupal page within admin -> content -< edit (using Drupal 7.36):
<script src="http://www.applitrack.com/dex/onlineapp/defaultlinks.asp?vacancyURL=http://www.applitrack.com/dex/onlineapp/jobpostings/view.asp"></script>
However, when I save and reload, the page completely ignores the script I added and shows a blank content area. I have the text format set to 'PHP Code', and there appear to be no restrictions on the html tags allowed. I have tried each of the different text formats, but to no avail. Any suggestions as to what else I may need to do would be greatly appreciate. Thanks in advance.
The best way to add js to drupal is with the drupal core funciton drupal_add_js.
drupal_add_js('http://example.com/example.js', 'external');
Create a very basic module and include something similar to that line in the hook_init function (if it's included on every page). If it is specific to a form include it in a form alter instead. Lot of other options to make it specific to the page its needed on but the general rule is include it only where it is needed.
You would have to change the ckeditor settings to make sure script tags are allowed
admin/config/content/ckeditor
This way however is not best practice and I suggest against it.
Edit your html.tpl.php template and add that js call near the bottom of your code.

Categories

Resources