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.
Related
CKEditor 4 or above
I have a CKEDITOR instance that I can access without problem parent.CKEDITOR.instances[instance_id]
I want to add bootstrap file to the head of the iframe generated by CKEDITOR (kind of hack, because normal way to add optional css file was not working).
I tried to get the iframe head and to inject the bootstrap file, but it fails always.
Any Suggestion?
If you are using classic editor with contents in iframe then please use contentsCss configuration setting to add extra CSS to editor contents area. It is important to refresh the cache with Ctrl+F5. If for some reason changes are not applied and path to CSS file is correct (you are not getting 404 in browser dev-tools console) then you might want to try clearing cache according to this link.
If you really need to get to the iframe, you can use below technique. It gets you the div with editor id you need and it finds iframe for it. This is good if you have couple of editors or iframes on a single page.
document.getElementById('cke_'+ your_textarea_id ).getElementsByTagName('iframe')[0].contentWindow
I found it finally, I post it here so maybe it will be helpful for someone in the future.
I just added the bootstrap file to the body tag (it is a bad practice but it works).
I just finished learning CSS and I trying to edit the format of the footer of the wordpress based website.
I can spot its code from firebug extension but dont know whether the HTML file is located in the wordpress directory so that I can edit it. Can anyone help. I am new to web development.
Go to wp-content/themes/your-theme/footer.php
There should be the PHP/HTML for the footer.
It is not always that easy to find where the html comes from.
e.g. : You can have a widget area in your footer.php and then your html comes from the widget you added to this area.
It also depends on the theme you use.
But mostly you'll see a header.php/footer.php/index.php file.
the most easy way to find HTML code or text is here: String Locator. just download this plugin and type the html code or text you need to find out and you can easily know the exact location of the particular code or text and after that you can easily change it.
Cheers!
According to the jQuery documentation for $.ajax, "included script tags are evaluated when inserted in the DOM.". When I use ajax to grab the content of a dialog box, which in turn contains a script tag for displaying a ReCaptcha box, the ReCaptcha box does not appear when added to the DOM. According to FireBug, the script tag is also now missing from the added content. Navigation directly to the dialog content displays the ReCaptcha just fine.
Does anyone know why this may be occuring and/or know a work around? Any help would be greatly appreciated.
Code in action can be viewed here:
https://dustinhendricks.com/
Then click "Register Now".
Does the script try to do things like document.write()? That won't work when loaded dynamically, only on the initial page load.
In general, scripts contained in HTML that is innerHTML'd is not evaluated consistently across browsers. To fix that, jQuery actually looks for script tags and executes them manually.
But that doesn't really matter. Even if jQuery didn't do that, the script would be running in a different type of context than it normally is when a page is loading for the first time. It's not really an 'inline script' anymore, and a lot of 3rd party scripts were written with it being 'inline' as an assumption. You'll have to figure out what the script is doing and find a way to call it with dynamic content.
Take a look at the Google reCAPTCHA AJAX API. Using the CAPTCHA this way should fix your problem.
I hope it helps!
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');
?>
I am trying to compare having a 1 page app with clientside routing to having a asp mvc app which just routes to html files, to see which is more appropriate for my current project. As I have no need for any Asp Mvc features its all javascript/html which communicates with a web service.
However one problem I can forsee with the one page app is that my site isnt really 1 page, so I would be having to have on main index.html which contained all shared resources. Then dynamically load in new pages based on the hashbang and add in any required scripts and css. This doesn't seem to hard as Jquery I believe provides a .load() method or something similar to get external resources... my problem though is getting rid of them once I am done...
Is there any way to do this, so you target ONLY certain script/link tags, can you give them Ids or something?
Any help on this would be great...
== EDIT ==
Added a simple example to show what I mean:
<!-- Script already in page -->
<script type="text/javascript" src="scripts/script1.js"></script>
<!-- Dynamically added script -->
<script type="text/javascript">
// some javascript
</script>
How can you tell which ones you should remove? If you could apply an id or uniqueness to each script then it may be ok, but thats what i am getting at with this question.
There are zero benefits to "removing resources." When a script has been loaded, removing the script tag from the page later has no purpose--it won't improve your browser performance at all, nor will it harm it to keep the files around.
Simply add your resources as needed and write your code such that it won't execute erroneously.
I'm not shre i understand why you would like to do that but link element (for css) and script (for js) are elements like any other and they can be deleted with remove().