Would I be safe moving this piece of code out from inside the document.ready() block.
var $userInfoNode = $('#userOptions');
CURR_USER_ID = $userInfoNode.attr('data-userId');
CURR_USER_NAME = $userInfoNode.text();
This code is placed in an external js file that is loaded from the head section of html page & selects an html element placed within html body, to extract data from there.
Short answer: No, since the JavaScript file is placed in the header.
The DOM (Document Object Model) needs to contain the <div id="userOptions"> when the code is executed.
Either you place the code after the div, for example right before the closing </body>.
Or you place the code within the $(document).ready() function, which is triggered as soon as the DOM is fully loaded.
out of the document.ready() block.
external js file that is loaded from the head section
selects an html element placed within html body
=> No. You can try it and will find $userInfoNode empty.
Yes.
You also need to ensure that the html elements you are going to refer to appear before your javascript.
in short put this
var $userInfoNode = $('#userOptions');
CURR_USER_ID = $userInfoNode.attr('data-userId');
CURR_USER_NAME = $userInfoNode.text();
at the end of your html page...
If you have to/want to keep it in an external file you can place the script element that references it at the bottom before your closing body tag. It looks a little weird at first but it is valid.
Related
I'm using Jquery in my site and I have a div with content loaded by ajax, like an iFrame. With my code I can access the content and even change the class and values, but I can't insert a script to be executed.
There is the code:
<script>
$("#loginsb").click(function () {
$('#curso')
.contents()
.find('#script').jQuery("<script>").prop("tagName")
.attr('src', load.js);
});
</script>
My ajax loaded div is curso and inside this div I have another div script where I placed the the script line - without the src. Is the only way I knew to use more than one script in my page and find just one of them.
Inside Curso div
<div id="script">
<script></script>
</div>
Any idea to attribute this src inside my div script? Thanks!
You miss some basics in understanding Javascript and jQuery.
First thing: you can only have one element with id="script" and in your example you have one script element inside it.
So you can target that script element inside the script id element using jQuery:
$('#script script')
Then adjust the source of the script:
$('#script script').attr('src', 'load.js');
(Note the quotation marks around load.js. this is a string literal not a variable or constant.)
I am trying to avoid header, sidebar info repeating of my html page template.
So, I was thinking to user innerHTML to replace the contents on the fly. However, I do not want to put entire target html on the same page under innerHTML as it will be nightmare to debug or maintain later.
So, is there a way to specify the another page link in the innerHtml and have contents separate?
just as an example
<script type="text/javascript">
function replacePage(page){
var ele = document.getElementById('page-wrapper'); ele.innerHTML = "<div>hey vik</div>";
}
</script>
I'm looking if i can specify the innerHTML value as some .html file name and move the <div>hey vik</div> there.
ok guys i finally used jquery to do this. What I did was instead of loaded content part, i actually moved the static part into a .html file and then loaded it via jquery as
$(function() {
$("#includedContent").load("navbar.html");
};
the place where i need to rander it i added as below
<div id="includedContent"></div>
You can use document.documentElement to select the root element of the document and the store it in a variable:
let content = document.documentElement;
And then use innerHTML to change the page content:
content.innerHTML = "<body><h1>text</h1><body>";
I am trying to read the particular contents of an child IFrame wrapped in a div tag from parent window. I am using
detailsValue = window.frames['myIframe'].document.getElementById('result').innerHTML;
with this I'm able to access the entire content of that frame. But I need to access only a portion of that content. The problem is that the div which wraps the content that I am looking for contains only class and no ID.
<div class="watINeed"> <table class="details"> </table> </div>
I am unable to access the content which is in a form of table (with no id and only class).
Any help.
Edit1: I need to access the content of the table to check for char length and also for some html tags present in that content.
You can do this either using plain Javascript (as mentioned by Notulysses):
window.frames['myIframe'].document.querySelector('.watINeed .details')
or using jQuery (since you aded jquery) by specifying the iframe's document as context to $:
$(".watINeed .details", window.frames['myIframe'].document)
In the latter case you've a fullfeatured jQuery object.
Note that in either case the iframe's document has to be on the same domain otherwise you'd run into cross origin issues.
Tested against jQuery 2.0.x
Update
If you're running the selector during page load of the including page, you'll have to listen to the load event of the iframe before accessing its content:
$(window.frames['myIframe']).on("load", function(){
// above query here
});
If your are looking for a vanilla Javascript, and your target div is a direct children of starting selector, it is a simple task
var detailsValue = window.frames['myIframe'].document.getElementById('result').innerHTML;
var target;
for(var i = 0; i< detailsValue.children.lenght; i ++){
if(detailsValue.children[i].getAttribute('class')== 'watINeed'){
target = detailsValue.children[i] ;
}
}
otherwise, have to write a recursive method to scrap all children of structure
As i wrote above, it can be done using the following:
document.querySelectorAll(".className")[0] or $(".className")[0]
those are basically the same as both return a list of nodes and the [0] simply means taking the first result from the list.
there are 2 things to pay attention to:
the iframe loads the content asynchronously therefore when you execute the query its most likely that the elements you are searching for did not load yet.
executing the code after DOM loads is not enough.
the solution is simply put your code in a block that executes once all the asynchronous content is loaded:
window.onload=function(){
window.frames['myIframe'].document.querySelectorAll(".watINeed")[0];
}
or the jQuery alternative:
$(window).load(function(){
window.frames['myIframe'].document.querySelectorAll(".watINeed")[0];
});
the second thing is, according to the page Here, you can access the iframe's document using contentWindow.document:
window.onload=function(){
window.frames['myIframe'].contentWindow.document.querySelectorAll(".watINeed")[0];
}
or the jQuery alternative:
$(window).load(function(){
window.frames['myIframe'].contentWindow.document.querySelectorAll(".watINeed")[0];
});
live example: Fiddle
Is it safe to assume that the last script element* in the document when the script runs** is the currently running script?
For example, I want to create a script that can be dropped anywhere in the body of of a page and display an element in the same place. I'm doing something like this:
function getCurrentScriptElement() {
var scripts = document.getElementsByTagName('script');
return scripts[scripts.length - 1];
}
var script = getCurrentScriptElement();
var view = document.createElement('span');
/* Put stuff in our view... */
script.parentNode.insertBefore(view, script);
Assuming the script is in the body of the document, is this "safe?" Will the getCurrentScriptElement function always return the running script? If not, how can it be done?
I'd like to do this without tying the script to a specific id attribute or similar, I'd like it to just be positional.
I created an example here that pulls in this script. One answer suggested that other scripts could create a condition where an example like this would break. Is it possible to add other scripts to this example that will break it?
It was suggested that other scripts with defer or async attributes could break this. Can anyone give an example of how such a script might work?
As I understand it, defer means load the DOM first, and then run the script with the defer tag. How would the defer attribute appearing on another script element affect the behavior of getCurrentScriptElement?
async, as I understand it, means start fetching that script and keep parsing the DOM at the same time, don't wait... but when it hits my script it should still stop and wait, right?
I don't see how either one could affect it, can anyone provide an example?
* I'm only interested in external scripts for the purpose of this question.
** Not the last script element in the entire document, but the last script element in the document at the time when it runs. The rest of the document shouldn't be loaded yet, right?
It's not an absolute guarantee no. Check out this JSFiddle: http://jsfiddle.net/jAsek/
<!DOCTYPE html>
<title>Test case</title>
<div>
<p>At the start</p>
<script id="first">
var scr1 = document.createElement("script");
scr1.setAttribute("id", "early");
document.body.appendChild(scr1);
</script>
<p>After the first script</p>
<script id="second">
function getCurrentScriptElement() {
var scripts = document.getElementsByTagName('script');
return scripts[scripts.length - 1];
}
alert(getCurrentScriptElement().id);
</script>
<p>At the end</p>
</div>
Here the alert reports the id of the injected script "early", not the id of currently running script "second".
There's no practical difference between internal and external scripts.
I don’t think it’s a safe assumption at all, as browsers execute javascript code quite differently depending on a number of things (like if you have other script elements in the head, if they are external etc.).
You should just require people to use a dummy element with a custom id or class. That way you will also make it possible to do whatever you do multiple times a page without having to run the script multiple times.
This is also what is done when using widgets, for example Google’s +1 button.
An alternative would be to use document.write to write additional content while the script is executed. This will not replace the script tag however, but simply add something after it.
You probably want to use document.currentScript that is currently supported by 90% of browsers and fallback to document.scripts[document.scripts.length-1] if you're targetting IE
function writeHere(element)
{
var sc = document.currentScript || document.scripts[document.scripts.length-1] ;
sc.parentNode.insertBefore(element, sc);
// or in jquery $(sc).before($(element));
}
note: I didn't test document.scripts[document.scripts.length-1] thoroughly but it should work in most cases (but not in Alohci exemple).
And this is a fix for IE so who cares :)
I've created a JavaScript script that can be pasted on someone's page to create an iFrame. I would like for the person to be able to paste the script where they would like the iFrame to appear.
However, I can't figure out how to append the DOM created iFrame to the location where the script has been pasted. It always appends it to the very bottom of the body.
How do I append in place?
Mm. You could do:
document.write("<div id='iframecontainer'></div>");
document.getElementById('iframecontainer').innerHTML = '...';
But that feels ugly/wrong in a lot of different levels. I am not aware of any other alternatives, though.
EDIT: Actually, a quick google search revealed this artlcle which discusses why document.write is ugly and a nice alternative for the particular pickle you're in: Give your script tag an ID!
<script id="iframeinserter" src=".."></script>
And then you can get a reference to the script tag and insert the iframe before it:
var newcontent = document.createElement('iframe');
var scr = document.getElementById('iframeinserter');
scr.parentNode.insertBefore(newcontent, scr);
Paulo's answer can also be done without the ID, by simply looking for the last <script> element. This must be the script block we're in, because JavaScript guarantees all content past the closing tag of the current script block has not yet been parsed(*):
var scripts= document.getElementsByTagName('script');
var script= scripts[scripts.length-1];
script.parentNode.insertBefore(d, script);
This can be put in an onload/ready function if you like, but if so the ‘var script’ must be calculated at include-time and not in the ready function (when that executes, more <script>s will have been parsed).
(*: except in the case of <script defer>.)
If the user can give an id of an element that will be where the iframe should be, then it would be possible to just use css to move the iframe to where it should be on the page.