How to remove a content from dynamic script in index.html - javascript

I must remove content from a script with attribute id and type application/json in index.html. It is from another application (the app is based on another app) and I can't locate where the script exists.
I tried:
<script type="text/javascript">
document.getElementById('wk-ra-state').textContent = ' ';
</script>
but without any effect probably because the script is always at the end of the index.html body.
Any ideas?

Actually, as your code that empty the script tag at the end of your HTML page is above it, it runs the code before the script is fully loaded. That is the reason why you get the error:
Uncaught TypeError: Cannot set property 'innerHTML' of null
In order to run the code after everything is loaded on the webpage, use:
document.addEventListener("DOMContentLoaded", function(event) {});
It will run the code after all DOM is loaded.
See the example below, the first example doesn't use the document.addEventListener("DOMContentLoaded", function(event) {}); and the second one using it.
Wrong example:
<script>
document.getElementById('wk-ra-state').innerHTML = '';
</script>
<!-- end of the html page -->
<script id="wk-ra-state" type="application/json">{&q;APP_SERIALIZATION_KEY&q;:{&q;recentFavorites&q;:{&q;pending&q;:false,&q;recentItems&q;:[{&q;id&q;:&q;&q;,&q;viewed&q;:false,&q;type&q;:&q;document&q;,&q;title&q;:&q;&q;,&q;link&q;:&q;javascript:void(0)&q;}]},&q;suggestions&q;:{&q;pending&q;:false,&q;requests&q;:{},&q;cach ............ </script>
Good example:
<script>
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById('wk-ra-state').innerHTML = '';
});
</script>
<!-- end of the html page -->
<script id="wk-ra-state" type="application/json">{&q;APP_SERIALIZATION_KEY&q;:{&q;recentFavorites&q;:{&q;pending&q;:false,&q;recentItems&q;:[{&q;id&q;:&q;&q;,&q;viewed&q;:false,&q;type&q;:&q;document&q;,&q;title&q;:&q;&q;,&q;link&q;:&q;javascript:void(0)&q;}]},&q;suggestions&q;:{&q;pending&q;:false,&q;requests&q;:{},&q;cach ............ </script>

Related

How to get the content of an external <script> object without calling the src URL again?

There is a page like this:
<html>
<head>
...
<script type="text/javascript" src="http://someserver/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="http://someserver/getJS?key=123456" ></script>
...
</head>
...
</html>
And the content of getJS
$(document).ready(function() {
...
}
The key is dynamically generated every time the page is loaded, like a session key. The script http://someserver/getJS?key= is only accessible once for each key. On the second access, it returns NULL. However, viewing from Developer Tools in Chrome, the content of getJS is cached in the Resources/Application panel.
My questions:
Using a GreaseMonkey script or snippet, how do you access the content of any external script object as String without calling the URL again?
In Chrome's DevTools, how do you access any script (and other objects) under the Resources/Application panel in a snippet?
Not sure if I'm interpreting your question correctly, but if you're trying to do what I think you're trying to do... You can use Javascript to dynamically create a <script> element, change its src property, and append it to the DOM.
(function() {
var body = document.querySelector('body');
var externalScript = body.createElement('script');
externalScript.src = "https://host.com/script.js";
document.body.appendChild(externalScript);
})()

function on javascript can't remove

how to remove ALL DOM in specific id, we know http://jsfiddle.net can test javascript for all condition.
directory file:
\root
\root\index.php
\root\load.php
index.php have script tag id='index' and this index.php using .load() (jQuery) for load.php, in load.php have script tag id='load',
i try use this method (in load.php for clean DOM from index.php):
$(document).ready(function(){
$("#index").remove();
});
but this not remove DOM Function, why??
EDIT :
This trouble is DOM cant be remove
i needed is delete a < script id='index' > and DOM Function (ALL FROM THIS TAG) if i loaded "load.php"
You can't use multiple elements with same id if you want to do so you need to use classes instead:
$(document).ready(function(){
$(".index").remove();
});
UPDATE
if what you want to hide your script when you load another file you could do so by surrounding your script between a div to hide for example:
<div class="divtohide">
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").load("load.php");
});
});
</script>
</div>
and in your load.php you could create a script to remove the .divtohide div:
<script>
$(document).ready(function(){
$(".divtohide").remove();
});
</script>
Your JavaScript will be run at .load(). So, we need to remove the string before loading the content into the webpage. I decided to use $.get, which will fetch the information as text. Then I run the data through a regex that will remove script#index. From there, I then append it to the page (for testing). If you notice there is no console.log's despite it being in the source of removeIndex.html, that's because we have successfully removed the JavaScript at script#index.
$.get("http://neil.computer/stack/removeIndex.html", function (data) {
data = data.replace(/<script.+?id=["']index["'](.|[\r\n])*?<\/script>/gi,"");
$("#container").html(data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>
removeIndex.html
This file has some sample input:
<div>
Testing stuff
</div>
<script id="index">
console.log("ignore me");
</script>
<div>
Testing more stuff
</div>

js code is not working in an external file, but works file when placed in the same html page

I have this code in the footer of my html page
<script type="text/javascript">
// using jQuery
$('video,audio').mediaelementplayer();
</script>
the above code is adding video player on the html page.
Now I have created a separate js file in which I have already have some line of code which is creating owl sliders, tooltips, number counters etc.
When I add the above code into that separate js file it does not work, instead when I keep it in the footer of the html page it works fine.
Try placing your code within $(function(){ ... }. This will execute when the DOM is loaded (currently your code is being executed before jQuery is loaded, if you check the JavaScript console, you will see an error something like $ is not defined)
$(function(){
$('video,audio').mediaelementplayer();
});
or
$( document ).ready(function() {
$('video,audio').mediaelementplayer();
});
You can read about what that is doing here. $(function() is the same as $( document ).ready()
your html(basically) should look like this:
<html>
<head>
</head>
<body>
<!-- html code here -->
<!-- add jquery lib -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- your script -->
<script src="you/file/path.js"></script>
</body>
</html>
and your jquery file:
jQuery(function($) {
// your functions here
$('video,audio').mediaelementplayer();
});
Do you have a proper link to the separate js file in your page, generally at the bottom of the body? It should look something like this:
<script type="text/javascript" src="/joyride_odoo_models/static/js/scripts.js"/>
If you've done that properly, have you tried clearing your browser cache? You may need to do that to detect new javascript files.
How do you call your external js file ?
You must add your references js before your external js file.
you must add your function on document.ready.
You may wait until jQuery is full loaded or ready.
Ex.
$(document).ready(function($) {
// Your code goes here
$('video,audio').mediaelementplayer();
});
This code goes in external js file, then you need to include the file in the HTML
<script type="text/javascript" src="path/to/your/js/file"></script>

Using separated .js javascript file to print to document

JS:
document.getElementById("terminal_text").innerHTML = "hello";
HTML:
<p id="terminal_text"></p>
<script type="text/javascript" src="js1.js"></script>
1st line inside js file.
2nd line and 3rd line(inside head) in html file.
I'm trying to use a javascript file to print to a paragraph tag using the ID and it's not printing. Any ideas? Thank you ! :)
Put the script tag after your element in the body:
<body>
.. stuff
<p id="terminal_text"></p>
<script type="text/javascript" src="js1.js"></script>
.. more stuff
</body>
You must place the <script> tag after the <p> tag, otherwise you <p> tag does not exist when your javascript code runs.
If you don't want to do this you can execute your code on the load event when your page is fully loaded:
window.addEventListener('load', function () {
document.getElementById("terminal_text").innerHTML = "hello";
});

Using a external .js file with knockout not applying bindings

I am trying to get to grips with Knockout and so I have created the following html file...
<html>
<head>
<script type='text/javascript' src='http://knockoutjs.com/downloads/knockout-3.2.0.js'></script>
<script type='text/javascript' src='jsfile.js'></script>
</head>
<h1>Welcome<h1>
<button data-bind="click: speak">Say it</button>
<script>
alert('Binding Started');
function indexViewModel() {
this.speak = function() {
alert('Working!!');
};
}
ko.applyBindings(new indexViewModel());
alert('Binding Done');
</script>
</html>
When I load the page all is well in the land of milk and honey. I get an alert that says the binding is starting.... Then I get another alert saying that its done and when I click the button... Yip you guessed it I get an alert stating that its working.
The problem I am having is when I try to separate the java-script code out into an external file it does not apply the bindings.
So my html file will look like this......
<html>
<head>
<script type='text/javascript' src='http://knockoutjs.com/downloads/knockout-3.2.0.js'></script>
<script type='text/javascript' src='jsfile.js'></script>
</head>
<h1>Welcome<h1>
<button data-bind="click: speak">Say it</button>
</html>
And my file "jsfile.js" looks like this....
alert('Binding Started');
function indexViewModel() {
this.speak = function() {
alert('Working asstastic');
};
}
ko.applyBindings(new indexViewModel());
alert('Binding Done');
When I now load the html page I get an alert for the binding starting and then ... Nothing...... :(
If I remove the line for the ko.applyBindings(.. then it gives me the second alert that the binding is done. however obviously the button does noting.
What am I doing wrong It seems like its not seeing the knockout functions in the .js file but I have hit a brick wall..
Please help..
The 'head' html tags will get loaded before the 'body' tags...
Your applying knockout bindings in your 'head' tags.
( in your custom .js file after including knockout )
These bindings / Javascript code is loaded / executed / happening before the body has been loaded;
Thus its / knockout is trying to bind js data to html body UI content which the browser / window does not yet know about.
p.s. - Put your content in a 'body' after the 'head'. Then include your custom .js file after the 'body,' this way everything is now loaded in order to achieve what you want. Alternatively... Include logic in the .js itself to execute after DOM / window has finished loading.
(Thanks to Jody Geers who pointed me in the right direction)
Ok I Was being an HTML noob..
No Body<>
Added them and then did the
<script type='text/javascript' src='jsfile.js'></script>
Works fine now..
Please put your js file after the Body .if you keep the Knock out js file in head then will not the UI with Model.As UIs are not found in the js file.

Categories