I wanted to add a paragraph element in a html file, and i succeeded. But, I just wanted to try in another way.
And i found a way which add the p element in a page.
This code is from stackoverflow.
<script type="text/javascript">
window.onload = function() {
var para = document.createElement('p');
para.innerHTML = '';
document.body.appendChild(para);
};
</script>
By using this internal script, successfully added p element.
And i added external script with defer attribute, and inside that, entered these code.
const para = document.querySelector('p');
para.textContent = 'hi';
but it doesn't work. in debugging tool, it says "Cannot set property 'textContent' of null".
So, I checked in console,
const check = document.body.querySelector('p');
check.textContent = 'hi';
it does work very well..
I just thought
when I load my HTML,
1st : load internal js file - make <p>. 2nd : parse whole HTML codes.
3rd : load external js file - manipulate <p>. and it will work well.
So, these are my questions.
Why 'para' constant doesn't be made in .js file?
what is the difference with console running and source file running in this case?
If you are using multiple external resources to generate markup. Try this:
const element = window.parent.document.querySelector(selector);
I have a problem with updating HTML element http://www.hororsf.iz.rs/. The element class is "date-header"
I tried Jquery function triggered on load
$( "date-header" ).replaceWith( "<h2>New heading</h2>" );
I tried this in Jquery:
<script language='text/javascript'>
function cirtolat(){
$('date-header').each(function() {
var text = $(this).text();
$(this).text(text.replace('петак', 'doll'));
});
}
</script>
<body onload="cirtolat();">
And this in Javascript
document.body.innerHTML = document.body.innerHTML.replace(/hello/g, 'hi');
I used another words this is just example. I tried this also: (every example provided here I put inside onload function).
var str = document.getElementById("demo").innerHTML;
var res = str.replace("Microsoft", "W3Schools");
document.getElementById("demo").innerHTML = res;
I first tried does this onload function work with alert and it worked. I need this to work on blogger platform so I don't have access to server side access only client side with jquery or javascript.
If I had access for sever side I would find wordpress language folder where he stores date array and replace all values with needed.
So I need to replace all occurrences of strings
децембар/новембар/октобар/септембар/август/јул/јун/мај/април/март/фебруар/јануар/
with
decembar/novembar/oktobar/septembar/avgust/jul/jun/maj/april/mart/februar/januar
days:
понедељак/уторак/среда/четвртак/петак/субота/недеља/
with
ponedeljak/utorak/sreda/četvrtak/petak/subota/nedelja/
I don't understand why standard methods of javascript and jquery I used on non-blogger sites don't work.
I read the tutorial DIY widgets - How to embed your site on another site for XSS Widgets by Dr. Nic.
I'm looking for a way to pass parameters to the script tag. For example, to make the following work:
<script src="http://path/to/widget.js?param_a=1¶m_b=3"></script>
Is there a way to do this?
Two interesting links:
How to embed Javascript widget that depends on jQuery into an unknown environment (Stackoverflow discussion)
An article on passing parameters to a script tag
I apologise for replying to a super old question but after spending an hour wrestling with the above solutions I opted for simpler stuff.
<script src=".." one="1" two="2"></script>
Inside above script:
document.currentScript.getAttribute('one'); // 1
document.currentScript.getAttribute('two'); // 2
Much easier than jQuery or URL parsing.
You might need the polyfill for document.currentScript from #Yared Rodriguez's answer for IE:
document.currentScript = document.currentScript || (function() {
var scripts = document.getElementsByTagName('script');
return scripts[scripts.length - 1];
})();
It's better to Use feature in html5 5 data Attributes
<script src="http://path.to/widget.js" data-width="200" data-height="200">
</script>
Inside the script file http://path.to/widget.js you can get the paremeters in that way:
<script>
function getSyncScriptParams() {
var scripts = document.getElementsByTagName('script');
var lastScript = scripts[scripts.length-1];
var scriptName = lastScript;
return {
width : scriptName.getAttribute('data-width'),
height : scriptName.getAttribute('data-height')
};
}
</script>
Got it. Kind of a hack, but it works pretty nice:
var params = document.body.getElementsByTagName('script');
query = params[0].classList;
var param_a = query[0];
var param_b = query[1];
var param_c = query[2];
I pass the params in the script tag as classes:
<script src="http://path.to/widget.js" class="2 5 4"></script>
This article helped a lot.
Another way is to use meta tags. Whatever data is supposed to be passed to your JavaScript can be assigned like this:
<meta name="yourdata" content="whatever" />
<meta name="moredata" content="more of this" />
The data can then be pulled from the meta tags like this (best done in a DOMContentLoaded event handler):
var data1 = document.getElementsByName('yourdata')[0].content;
var data2 = document.getElementsByName('moredata')[0].content;
Absolutely no hassle with jQuery or the likes, no hacks and workarounds necessary, and works with any HTML version that supports meta tags...
JQuery has a way to pass parameters from HTML to javascript:
Put this in the myhtml.html file:
<!-- Import javascript -->
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<!-- Invoke a different javascript file called subscript.js -->
<script id="myscript" src="subscript.js" video_filename="foobar.mp4">/script>
In the same directory make a subscript.js file and put this in there:
//Use jquery to look up the tag with the id of 'myscript' above. Get
//the attribute called video_filename, stuff it into variable filename.
var filename = $('#myscript').attr("video_filename");
//print filename out to screen.
document.write(filename);
Analyze Result:
Loading the myhtml.html page has 'foobar.mp4' print to screen. The variable called video_filename was passed from html to javascript. Javascript printed it to screen, and it appeared as embedded into the html in the parent.
jsfiddle proof that the above works:
http://jsfiddle.net/xqr77dLt/
Create an attribute that contains a list of the parameters, like so:
<script src="http://path/to/widget.js" data-params="1, 3"></script>
Then, in your JavaScript, get the parameters as an array:
var script = document.currentScript ||
/*Polyfill*/ Array.prototype.slice.call(document.getElementsByTagName('script')).pop();
var params = (script.getAttribute('data-params') || '').split(/, */);
params[0]; // -> 1
params[1]; // -> 3
If you are using jquery you might want to consider their data method.
I have used something similar to what you are trying in your response but like this:
<script src="http://path.to/widget.js" param_a = "2" param_b = "5" param_c = "4">
</script>
You could also create a function that lets you grab the GET params directly (this is what I frequently use):
function $_GET(q,s) {
s = s || window.location.search;
var re = new RegExp('&'+q+'=([^&]*)','i');
return (s=s.replace(/^\?/,'&').match(re)) ? s=s[1] : s='';
}
// Grab the GET param
var param_a = $_GET('param_a');
Thanks to the jQuery, a simple HTML5 compliant solution is to create an extra HTML tag, like div, to store the data.
HTML:
<div id='dataDiv' data-arg1='content1' data-arg2='content2'>
<button id='clickButton'>Click me</button>
</div>
JavaScript:
$(document).ready(function() {
var fetchData = $("#dataDiv").data('arg1') +
$("#dataDiv").data('arg2') ;
$('#clickButton').click(function() {
console.log(fetchData);
})
});
Live demo with the code above: http://codepen.io/anon/pen/KzzNmQ?editors=1011#0
On the live demo, one can see the data from HTML5 data-* attributes to be concatenated and printed to the log.
Source: https://api.jquery.com/data/
it is a very old thread, I know but this might help too if somebody gets here once they search for a solution.
Basically I used the document.currentScript to get the element from where my code is running and I filter using the name of the variable I am looking for. I did it extending currentScript with a method called "get", so we will be able to fetch the value inside that script by using:
document.currentScript.get('get_variable_name');
In this way we can use standard URI to retrieve the variables without adding special attributes.
This is the final code
document.currentScript.get = function(variable) {
if(variable=(new RegExp('[?&]'+encodeURIComponent(variable)+'=([^&]*)')).exec(this.src))
return decodeURIComponent(variable[1]);
};
I was forgetting about IE :) It could not be that easier... Well I did not mention that document.currentScript is a HTML5 property. It has not been included for different versions of IE (I tested until IE11, and it was not there yet). For IE compatibility, I added this portion to the code:
document.currentScript = document.currentScript || (function() {
var scripts = document.getElementsByTagName('script');
return scripts[scripts.length - 1];
})();
What we are doing here is to define some alternative code for IE, which returns the current script object, which is required in the solution to extract parameters from the src property. This is not the perfect solution for IE since there are some limitations; If the script is loaded asynchronously. Newer browsers should include ".currentScript" property.
I hope it helps.
This is the Solution for jQuery 3.4
<script src="./js/util.js" data-m="myParam"></script>
$(document).ready(function () {
var m = $('script[data-m][data-m!=null]').attr('data-m');
})
Put the values you need someplace where the other script can retrieve them, like a hidden input, and then pull those values from their container when you initialize your new script. You could even put all your params as a JSON string into one hidden field.
It's simpler if you pass arguments without names, just like function calls.
In HTML:
<script src="abc.js" data-args="a,b"></script>
Then, in JavaScript:
const args=document.currentScript.dataset.args.split(',');
Now args contains the array ['a','b']. This assumes synchronous script calling.
I wanted solutions with as much support of old browsers as possible. Otherwise I'd say either the currentScript or the data attributes method would be most stylish.
This is the only of these methods not brought up here yet. Particularly, if for some reason you have great amounts of data, then the best option might be:
localStorage
/* On the original page, you add an inline JS Script.
* If you only have one datum you don't need JSON:
* localStorage.setItem('datum', 'Information here.');
* But for many parameters, JSON makes things easier: */
var data = {'data1': 'I got a lot of data.',
'data2': 'More of my data.',
'data3': 'Even more data.'};
localStorage.setItem('data', JSON.stringify(data));
/* External target JS Script, where your data is needed: */
var data = JSON.parse(localStorage.getItem('data'));
console.log(data['data1']);
localStorage has full modern browser support, and surprisingly good support of older browsers too, back to IE 8, Firefox 3,5 and Safari 4 [eleven years back] among others.
If you don't have a lot of data, but still want extensive browser support, maybe the best option is:
Meta tags [by Robidu]
/* HTML: */
<meta name="yourData" content="Your data is here" />
/* JS: */
var data1 = document.getElementsByName('yourData')[0].content;
The flaw of this, is that the correct place to put meta tags [up until HTML 4] is in the head tag, and you might not want this data up there. To avoid that, or putting meta tags in body, you could use a:
Hidden paragraph
/* HTML: */
<p hidden id="yourData">Your data is here</p>
/* JS: */
var yourData = document.getElementById('yourData').innerHTML;
For even more browser support, you could use a CSS class instead of the hidden attribute:
/* CSS: */
.hidden {
display: none;
}
/* HTML: */
<p class="hidden" id="yourData">Your data is here</p>
Im having an issue getting the image url from a website that I am trying to scrape.
I am able to get all the text no problem with a snippet of code like this:
var cost = casper.fetchText('span.large');
However when I attempt to get the image URL im receiving an "undefined" reply in console.
var img = casper.getHTML('.search-product-image').src;
.search-product-image is the image class and I just simiply want to get the image url, thank you.
Use this :
casper.getElementAttribute('.search-product-image','src');
You can include JQuery and take advantage of the syntactic sugar below or do it the vanilla way. FYI if your getLink has an error in it and you try to casper.evaluate(getLinks) it will return null. It will not indicate which line it's on or the error.
var casper = require('casper').create({
verbose: true,
logLevel: 'debug',
clientScripts: ["vendor/jquery.min.js", "vendor/lodash.js"]
});
...
function getLinks(){
// Scraping images
$("img.ExImg.ExResult-img").each(function() {
imgSrc = this.src;
tempImagesArr.push(imgSrc);
});
}
casper.run(function() {
var workouts = this.evaluate(getLinks);
this.saveJSON(workouts);
this.exit();
});
I don't know how casperjs is working but, you have to read casperjs docs.
http://casperjs.readthedocs.org/en/latest/modules/casper.html#gethtml
getHTML function is returning html value in container. So you have split src value in this string. Or you can use just querySelector.
Try this code :
var img = document.querySelector('.search-product-image').src;
if there are lot of element in your document, you have to use document.querySelectorAll('.search-product-image')[0]
I've added a CKEditor instance programmatically to my page in the code-behind of my ASP.NET page:
VB.NET:
itemEditor = New CkEditor
cell.Controls.Add(itemEditor)
... which works fine. I can get the HTML on the postback and do stuff with it.
However, I also want to do some client-side stuff with it, specifically take a selected item out of another control, and insert it into the text by handling the onchange event.
So, how can I get the name of the editor instance in the JavaScript, so that I can do stuff like:
function GetCkText()
{
var htmlFromEditor = CKEDITOR.instances['editorName'].getData();
// do stuff with htmlFromEditor
}
Assuming you only have one editor instance:
for ( var i in CKEDITOR.instances ){
var currentInstance = i;
break;
}
var oEditor = CKEDITOR.instances[currentInstance];
Here is what the JavaScript API says about instances.
Here is another way of defining the CKEditor. Here 'fck' is the input fields id:
CKEDITOR.replace( 'fck', {
customConfig : prefix + 'js/ckeditor/config.js',
height: 600,
width: 950
});
editor = CKEDITOR.instances.fck;
Notice how I am then able to reference the instance using .fck.
If you only have a single instance and you do not know the name of it.
CKEDITOR.instances[Object.keys(CKEDITOR.instances)[0]].getData()
The following code:
var allInstances=CKEDITOR.instances;
for ( var i in allInstances ){
alert(allInstances[i].name);
}
works fine for me.
Well I've found a way... but I don't like it much...
I've added a Hidden Field control to the page, after adding the editor, and put the editor's ClientId in its value:
Dim hdn As New HiddenField
With hdn
.ID = "HiddenField"
.Value = itemEditor.ClientID
End With
cell.Controls.Add(hdn)
.. and then in the JavaScript, I can get the hidden field, and hence the editor name as follows:
function GetCkText()
{
var hdn = document.getElementById("HiddenField");
var editorName = hdn.getAttribute("value");
var editor = CKEDITOR.instances[editorName];
alert(editor.getData());
return false;
}
But it's a bit inelegant, to say the least. Anyone got a better way?
If you are using CKEDITOR.appendTo(...), keep in mind that the ckeditor does create an instance name internally. So you can query for that name immediately after creating it, then store it somewhere, and use it later.
var lvo_editor = CKEDITOR.appendTo( "my_div" , null , lvs_html ) ;
my_global_var = lvo_editor.name ;
by the way: The CKEDITOR.replace(...) method allows you to define an instance name (see answer above)
If you need the instance from a plugin, at least in version 4+ you can do this.
CKEDITOR.currentInstance
Here I am wanting to know the name of the textarea I applied ckeditor on.
CKEDITOR.currentInstance.name