How to dynamically remove script from a page - javascript

What i am trying is -
http://jsfiddle.net/jhrz9/1/
to remove the script generated when someone clicks the button #goBack button
Now i am able to create and append script and style tags when the user clicks the #runMyCode
But as soon as i go back to the previous screen using #goBack button the script stays on the screen, now what i want to do is to remove that script and create another one again when i click the #runMyCode button
Now i am trying this -
var newScript = document.createElement('script'); ;
var newTextNode=document.createTextNode($("#jsTextArea").val());
newScript.type = 'text/javascript';
newScript.appendChild(newTextNode);
document.body.appendChild(newScript);
$('#goBack').click(function(){
newTextNode.parentNode.removeChild(newTextNode);
});
But for some reason it is not working....

you have to give the script an id.
$("#runMyCode").click(function(){
$("#resultContainer").html($("#htmlTextArea").val());
var newScript = document.createElement('script');
newScript.id = "goback_script";
var newTextNode=document.createTextNode($("#jsTextArea").val());
newScript.type = 'text/javascript';
newScript.appendChild(newTextNode);
document.body.appendChild(newScript);
var newStyle = document.createElement('style');
var newTextNode2=document.createTextNode($("#cssTextArea").val());
newStyle.type = 'text/css';
newStyle.appendChild(newTextNode2);
document.body.appendChild(newStyle);
});
$('#goBack').click(function(){
var script = document.getElementById("goback_script");
script.parentElement.removeChild(script);
});
jsFiddle

Related

Replace href value once the popup appears from the third party script is loaded

I tried to replace the href value by placing the below code at the bottom of the jsp after the third party script is placed but href value is not getting replaced as the popup takes time to get displayed
(function () {
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'third party url using which we get the popup';
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
})();
Placing the below code to replace href of the popup
$('#pid a').attr("href",'javascript:void(0)');
Seems like you are calling your function on page load directly. Can you please try with the $(document).ready(). Below is the sample code.
$(document).ready(
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'third party url using which we get the popup';
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
);

Dynamically Add js file at the end of the page using javascript?

I want to add one js file at the bottom of the page before </body> tag.
I am trying one format. But its not working properly.
My code
var url = 'sample.js';
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
document.getElementsByTagName('body')[0].appendChild(script);
But its not working.
Now i check
var x = document.getElementsByTagName('body');
alert(x.length);
its shows 0
How can i add this js file into my bottom of the page. Please advise
See this code
var body = document.body;
alert("Body when page loading: " + body);
document.addEventListener("DOMContentLoaded", function() {
var bodyLoaded = document.body;
alert("Body when page loaded: " + bodyLoaded);
var url = "http://code.jquery.com/jquery-1.10.2.min.js";
var script = document.createElement('script');
script.type = "text/javascript";
script.src = url;
script.onload = function(){
var testP = $("<p></p>");
testP.html("JQuery worked");
$(document.body).append(testP);
}
bodyLoaded.appendChild(script);
});
If first alert you get null. But in second (when body loaded) you get HTMLBodyElement. This is your mistake if you try to append element to body in head before body loaded.
You are writing your this code in the head section and at the time this executes body element is not yet created. This is the only reason for error. Keep this code after body element is created.

How to programmatically add JS and CSS resources to <h:head>

I need to add programmatically JavaScript and CSS resources to <h:head> of a JSF page. It isn't clear how to achieve this. How can I do it or is there a kickoff example?
That depends on where exactly you'd like to declare the resource. Normally, the only reason to programmatically declare them is that you've a custom UIComponent or Renderer which generates HTML code which in turn requires those JS and/or CSS resources. They are then to be declared by #ResourceDependency or #ResourceDependencies.
#ResourceDependency(library="mylibrary", name="foo.css")
public class FooComponentWithCSS extends UIComponentBase {
// ...
}
#ResourceDependencies({
#ResourceDependency(library="mylibrary", name="bar.css"),
#ResourceDependency(library="mylibrary", name="bar.js")
})
public class BarComponentWithCSSandJS extends UIComponentBase {
// ...
}
But if you really need to declare them elsewhere, such as in a backing bean method which is invoked before render response (otherwise it's simply too late), then you can do that by UIViewRoot#addComponentResource(). The component resource must be created as an UIOutput having a renderer type of javax.faces.resource.Script or javax.faces.resource.Stylesheet, to represent a fullworthy <h:outputScript> or <h:outputStylesheet> respectively. The library and name attributes can just be put in the attribute map.
UIOutput css = new UIOutput();
css.setRendererType("javax.faces.resource.Stylesheet");
css.getAttributes().put("library", "mylibrary");
css.getAttributes().put("name", "bar.css");
UIOutput js = new UIOutput();
js.setRendererType("javax.faces.resource.Script");
js.getAttributes().put("library", "mylibrary");
js.getAttributes().put("name", "bar.js");
FacesContext context = FacesContext.getCurrentInstance();
context.getViewRoot().addComponentResource(context, css, "head");
context.getViewRoot().addComponentResource(context, js, "head");
You can add a script and style resources to a page like this:
var head = document.getElementsByTagName("head")[0];
var s = document.createElement("script");
s.type = "text/javascript";
s.src = "xxxx.js";
head.appendChild(s);
s = document.createElement("style");
s.type = "text/css"
s.src = "yyy.css";
head.appendChild(s);
Or, in function form:
function addScript(path) {
var head = document.getElementsByTagName("head")[0];
var s = document.createElement("script");
s.type = "text/javascript";
s.src = path;
head.appendChild(s);
}
function addCSSFile(path) {
var head = document.getElementsByTagName("head")[0];
var s = document.createElement("style");
s.type = "text/css";
s.src = path;
head.appendChild(s);
}

How to include javascript file in a specific tag?

Ok, I've got this function:
/* jsHandler.js */
function inc(filename)
{
var body = document.getElementsByTagName('body').item(0);
script = document.createElement('script');
script.src = filename;
script.type = 'text/javascript';
body.appendChild(script)
}
What i would like is extending the script to tell js where to insert the js.file, like, say i have this in html:
<div id="mydiv"></div>
<iframe id="myiframe"></iframe>
i call
inc(this.js, mydiv)
to include the js.file in the div "mydiv",
resulting in:
<div id="mydiv"><script src="this.js" type="text/javascript"></script></div>
How do i do that?
Try this...
/* jsHandler.js */
function inc(filename,target)
{
var targetelement= document.getElementById(target); // get the target element
script = document.createElement('script');
script.src = filename;
script.type = 'text/javascript';
targetelement.appendChild(script); // add the script to the target
}
You always pick your body element
var body = document.getElementsByTagName('body').item(0);
and simply append the script tag to it:
body.appendChild(script)
What you want to do
Pick your target element and append it there.
var target = document.getElementsById(mydiv);
// ... other code lines
target.appendChild(script)

Insert a Script into a iFrame's Header, without clearing out the body of the iFrame

I'm looking to add a script to an iFrame's header while not losing everything contained in the iFrame's body or header...
here is what I have right now which does update the iFrame with the new script, but it cleans everything in the iframe out, not appends which is what I'd like. thxs! B
// Find the iFrame
var iframe = document.getElementById('hi-world');
// create a string to use as a new document object
var val = '<scr' + 'ipt type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></scr' + 'ipt>';
// get a handle on the <iframe>d document (in a cross-browser way)
var doc = iframe.contentWindow || iframe.contentDocument;
if (doc.document) { doc = doc.document;}
// open, write content to, and close the document
doc.open();
doc.write(val);
doc.close();
var headID = document.getElementsByTagName("head")[0];
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'yourpath';
headID.appendChild(newScript);

Categories