I have an odd problem. the question is not so much about specifics of the code, more to the general approach.
scenario: a website has a "welcome screen". The welcome element is an HTML5 EDGE animation (its not a small file ;) ) Using client side detection, we will check if cookies are enabled. if cookies are enabled, we check for a cookie['loader_shown']. if we dont see this cookie, we want to use JS to show a full screen overlay div half opaque. inside this div, we then want to use AJAX to load in the loading element html - at the moment this is defined in a seperate file, and of course refences other files in the EDGE file package...
Any suggestions on how best to approach this. it is important the HTML5 EDGE element is only loaded from the server once the welcome detection has oipened the first overlay div....
oh, the EDGE element must remain transparent!
solved. the best approach is to dynamically load the js files once the cookies have been checked:
sources in comments
<!DOCTYPE HTML>
<html lang="en">
<head>
<script type="text/javascript">
var cookiesEnabled = are_cookies_enabled();
function are_cookies_enabled() // http://sveinbjorn.org/cookiecheck
{
var cookieEnabled = (navigator.cookieEnabled) ? true : false;
if (typeof navigator.cookieEnabled == "undefined" && !cookieEnabled)
{
document.cookie="testcookie";
cookieEnabled = (document.cookie.indexOf("testcookie") != -1) ? true : false;
}
return (cookieEnabled);
}
// http://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS
if(cookiesEnabled == true)
{
var headID = document.getElementsByTagName("head")[0];
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.charset = 'utf-8';
//newScript.onload=scriptLoaded; // If you're loading an external javascript and you need to know when the script has loaded you can simply use .onload=yourfunction; to set up the onload handler. Here's an example.
newScript.src = '_loader/head3_C_213_no_preloader_edgePreload.js';
headID.appendChild(newScript);
}
</script>
<style>
.edgeLoad-EDGE-614773 {
display:none;
}
</style>
</head>
<body style="margin:0;padding:0;">
<h1>test</h1>
<div id="Stage" class="EDGE-614773">
</div>
</body>
</html>
never really thought about JS loading itself from script like that...... Oh the possibilities!
Related
I am automating a process wherein I have to login to website and download only the CSV files from the different types of files.
My jQuery code is getting executed in the console but not getting executed after integrating with HTML. Please find the jQuery code below :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).on("load", function() {
$('.ibody tr').each(function(a, b) {
var count = 0;
var name = $('.cl', b).text();
if (name.indexOf(".CSV") !== -1 && name.indexOf("TAS") !== -1) {
var d = a - 9;
var hiddenIFrameID = 'hiddenDownloader' + count++;
var iframe = window.createElement('iframe');
iframe.id = hiddenIFrameID;
iframe.style.display = 'none';
window.body.appendChild(iframe);
iframe.src = "https://www.shipper-ml.com/viewReports.do?ctrl=reportListForDownload&action=DownloadReport¶m=" + d;
}
});
});
</script>
</head>
<body></body>
</html>
EDIT: I was, indeed, off-base with this. Didn't read your code carefully.
leaving this here for historical purposes...
I might be completely off-base with my assumptions here, and apologize in advance if this is the case. That said, it really looks like you are trying to load a page inside an IFrame and use jQuery outside of the IFrame to read data from inside the IFrame.
Long story short: you cannot use jQuery (or any javascript, or, indeed, ANYTHING AT ALL, if the browsers are working as they should) to manipulate or read content that is inside an IFrame, from outside the IFrame, if that IFrame has a src tag.
You can only manipulate / read from iframe you have built from scratch by yourself. This is by design, and for an important security reason. If you want to use IFrame to display a page, you are severely restricted to only show the page to user as-is.
If my assumption was correct, you need to either:
Get your JavaScript embedded (nicely) into the page you are now loading in your IFrame or
Use an AJAX call to get the contents of that page into your current page's memory context. This will probably mean jumping through some hoops if you really want to use jQuery to find all the elements you want.
...or, you may be able to create an empty IFrame, put the content you got from the AJAX call into that IFrame along with your Javascript, and get it to work. maybe. Not sure about this one.
can you please try with this? replace your window.createElement with document.createElement .
$(document).ready(function() {
$('.ibody tr').each(function(a, b) {
var count = 0;
var name = $('.cl', b).text();
if (name.indexOf(".CSV") !== -1 && name.indexOf("TAS") !== -1) {
var d = a - 9;
var hiddenIFrameID = 'hiddenDownloader' + count++;
var iframe = document.createElement('iframe');
iframe.id = hiddenIFrameID;
iframe.style.display = 'none';
document.body.appendChild(iframe);
iframe.src = "https://www.shipper-ml.com/viewReports.do?ctrl=reportListForDownload&action=DownloadReport¶m=" + d;
}
});
})
The question says it all. How to update the "src" of script tag using jQuery.
Let say, I have a script,
<script id="somescript" type="text/javascript" src=""></script>
So when I a click on a button, the src of the script must be added. Like,
<script id="somescript" type="text/javascript" src="linktoscript.js"></script>
I am doing it with a click handler like this, using the following code.
$("#somescript").attr("src","linktoscript.js");
It actually updates the src but when I check it via firebug, it tells me to refresh the page to get the script working.
Research:
After some research, I've found $.get() of jQuery would do the job and yes, it loads the script. But it is not getting my job done.
The Actual Problem:
I am trying to load Google's conversion code using Ajax on successful form submission.
Here is the part of the Ajax script that should work for the Google's conversion code.
if (res == "yes") {
$('#success').fadeIn().delay(5000).fadeOut();
$('#regform')[0].reset();
window.location.href = '#';
/* <![CDATA[ */
var google_conversion_id = xxxxxxxxx;
var google_conversion_language = "en";
var google_conversion_format = "2";
var google_conversion_color = "ffffff";
var google_conversion_label = "CiaXCOXjzlcQy__EyQM";
var google_remarketing_only = false;
/* ]]> */
$.getScript("http://www.googleadservices.com/pagead/conversion.js");
}
It loads the conversion script but when I check it from firebug, all the values of the conversion variables are null.
So I am giving it a try by putting all of the conversion code into the html file and then load the conversion script like,
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = xxxxxxxxx;
var google_conversion_language = "en";
var google_conversion_format = "2";
var google_conversion_color = "ffffff";
var google_conversion_label = "CiaXCOXjzlcQy__EyQM";
var google_remarketing_only = false;
/* ]]> */
</script>
<script type="text/javascript" src="#"></script> <!--Update this src-->
<noscript>
<div style="display:inline">
<img height="1" width="1" style="border-style:none;" alt="" src="#" />
</div>
</noscript>
Any Help?
Link:
Here is the link to the live site : Link
Update:
This is what I get. In the firebug's script panel, after form submission,
It would appear that the Google conversion script relies on google_conversion_id, google_conversion_language, etc. to be available as global variables. Presuming that the code you have there is executing inside a function (which would make sense if this is inside an event), the code you have there will not work because the variables will be local to the function they are in, and the google code will have no way to get at them.
There are two things you can do.
One is to define those variables in the global scope ahead of time, i.e. do this:
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = xxxxxxxxx;
var google_conversion_language = "en";
var google_conversion_format = "2";
...
</script>
(you can also put these in an external script file and load that file when the page loads:
If you do that, you can load the google conversion script whenever you want, and it will be able to access those variables:
$.getScript("http://www.googleadservices.com/pagead/conversion.js");
The other option is to assign your variables to the window object right before you load the script, which is equivalent to putting them in the global scope:
if (res == "yes") {
$('#success').fadeIn().delay(5000).fadeOut();
$('#regform')[0].reset();
window.location.href = '#';
window.google_conversion_id = xxxxxxxxx;
window.google_conversion_language = "en";
window.google_conversion_format = "2";
window.google_conversion_color = "ffffff";
window.google_conversion_label = "CiaXCOXjzlcQy__EyQM";
window.google_remarketing_only = false;
$.getScript("http://www.googleadservices.com/pagead/conversion.js");
}
Note: regarding the issue that this question was originally about, you can't load a script by changing the src attribute of an existing script element:
http://jsfiddle.net/5vf6b924/
Once a script element has loaded whatever is indicated by the src (even if it's #), it is essentially "used up" and won't load anything else.
What you can do is to create a new script element and add it to the DOM:
http://jsfiddle.net/ydu52cn1/
That should succeed in loading the script (asynchronously).
As you've found, jQuery also provides the $.getScript convenience method for this.
At the end, the following did the job for me. Thanks to JLRishe and A. Wolff for their support.
In my previous code, there were two problems.
I was not inserting the "img" element along with other conversion code. (Silly mistake but I was working with conversion code for the first time. So please pardon me).
Inserting src of the "img" tag in the default format would give error. The default & would render Invalid URL encode error upon AJAX response. Thanks for Tag Assitant. Rather than using &, use & directly like this.
www.googleadservices.com/pagead/conversion/xxxxxxxxx/?label=CiaXCOXjzlcQy__EyQM&guid=ONscript=0
Here is what finally worked for me.
if (res == "yes") {
$('#success').fadeIn().delay(5000).fadeOut();
$('#regform')[0].reset();
<!-- Google Code for Lead Conversion Page -->
/* <![CDATA[ */
window.google_conversion_id = xxxxxxxxx;
window.google_conversion_language = "en";
window.google_conversion_format = "2";
window.google_conversion_color = "ffffff";
window.google_conversion_label = "CiaXCOXjzlcQy__EyQM";
window.google_remarketing_only = false;
/* ]]> */
$.getScript("//www.googleadservices.com/pagead/conversion.js");
window.scriptTag2 = document.createElement('noscript');
window.imgTag = document.createElement('img');
imgTag.height = 1;
imgTag.width = 1;
imgTag.border = 0;
imgTag.src = "//www.googleadservices.com/pagead/conversion/xxxxxxxxx/?label=CiaXCOXjzlcQy__EyQM&guid=ONscript=0";
}
I hope it will help the someone else with the same problem.
Thank you.
You could append the script tag to the DOM
if (yourCondition === true) {
$('head')
.append($('<script id="somescript" type="text/javascript" src="linktoscript.js"></script>'));
}
The script is loaded at the moment it is appended, that way you have total control of when it is loaded.
We are using the Ning platform, and in order to add a new container DIV underneath the blog content (but before the comment section), we added the following before the body tag:
<script type="text/javascript">
if (typeof(x$) != 'undefined') {
x$("DIV.xg_module.xg_blog.xg_blog_detail.xg_blog_mypage.xg_module_with_dialog").after('<div>CONTENT GOES HERE </div>');
}
else{
}
</script>
However, then the content we need to load is javascript from an affiliate program, who sent us this code to add into that div:
<div style="width:750px;">
<div style="border-bottom:1px solid #FFFFFF;color:#FFFFFF;font-family:Arial,Helvetica,sans-serif;font-size:22px;font-weight:bolder;margin-bottom:10px;padding-bottom:2px;text-transform:uppercase;">From Around the Web</div>
<script type='text/javascript'>
var _CI = _CI || {};
(function() {
var script = document.createElement('script');
ref = document.getElementsByTagName('script')[0];
_CI.counter = (_CI.counter) ? _CI.counter + 1 : 1;
document.write('<div id="_CI_widget_');
document.write(_CI.counter+'"></div>');
script.type = 'text/javascript';
script.src = 'http://widget.crowdignite.com/widgets/29949?_ci_wid=_CI_widget_'+_CI.counter;
script.async = true;
ref.parentNode.insertBefore(script, ref);
})(); </script>
</div>
And obviously, that does not work.
THE QUESTION: is there a better way to do this? Is it just a matter of all the conflicting 's and "s? Is there an easier way to format this or output it? Is it failing because it's simply not loading the javascript after the JQuery has already run post-page load? I have been trying different things and none seem to work and my eyes are ready to pop out of their sockets because I know there's something stupid I'm missing, so I thought I'd get some more eyes on it.
Thanks for any help/ideas/suggestions.
Try appending your new script element to the head element on your page. Most dynamic script loaders do this.
See Ways to add javascript files dynamically in a page for an example.
i want to append a style sheet(css) link to the head of an iframe using jquery .
i tried with the following code but not working.
$('#tabsFrame').contents().find("head").append(cssLink);
i am used to append data to an iframe by using this line of code
$('body', window.frames[target].document).append(data);
In your case, this line would look like this
$('head', window.frames['tabsFrame'].document).append(cssLink);
EDIT:
Add <head></head> to the iframe and change your var cssLink to
cssLink = '<link href="cupertino_1.4/css/cupertino/jquery-ui-1.8.7.custom.css" type="text/css" rel="Stylesheet" class="ui-theme" />
well, you can check with this:
$('#tabsFrame').contents().find("head")[0].appendChild(cssLink);
I believe you can't manipulate the content of an iframe because of security.
Having you be able to do such a thing would make cross-site-scripting too easy.
The iframe is totally seperate from the DOM of your page.
Also, java and javascript are two completely different things!
Follow the Link to see the difference here
This could be related to IE not allowing you to add elements in the DOM, check out the clever solution here
EDIT:
Thanks #kris, good advice to add more info in case links break:
Here is the main code snippet from the link, in case it goes out again.
(This is only needed with some IE version, for the most part, the other answer work just fine)
var ifrm;
//attempts to retrieve the IFrame document
function addElementToFrame(newStyle) {
if (typeof ifrm == "undefined") {
ifrm = document.getElementById('previewFrame');
if (ifrm.contentWindow) {
ifrm = ifrm.contentWindow;
} else {
if (ifrm.contentDocument.document) {
ifrm = ifrm.contentDocument.document;
} else {
ifrm = ifrm.contentDocument;
}
}
}
//Now that we have the document, look for an existing style tag
var tag = ifrm.document.getElementById("tempTag");
//if you need to replace the existing tag, we first need to remove it
if (typeof tag != "undefined" || tag != null) {
$("#tempTag", ifrm.document).remove();
}
//add a new style tag
$("HEAD", ifrm.document).append("");
}
I need to have a function called after a larger image is loaded on the page. I've tried some various solutions that I've found on here and around the web, but none either fit or work. Here's what I've tried that seems to make the most sense...and this is using jQuery
var imgs = $('#bgStage img.bg'),
imgCnt = imgs.length,
cnt = 0;
imgs.load(function () {
cnt++;
if (imgCnt === cnt) {
homeSlider();
}
}).each(function () {
if (this.complete) {
$(this).trigger('load');
}
});
This doesn't seem to wait until the img.bg is loaded. The homeSlider() function is called and started as I still see the image still loading.
So, I am wondering how a browser determines an image is loaded? Is it when it can read the width and height? Because I am defining the width and height in the CSS for the image to force it to be a certain size.
If anyone has any insight as to what makes the onload event fire for an image, that'd be great! Thanks.
You can always check for $('img').length();
Here's a sample code that should work. I did a project that needed this and I remember that some problems might include:
The browser caches the image (IE i believe) so I had to append ?[random] at the end
Maybe you have to set the src javascriptly so that your event is hooked at the right time
Sample code:
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#imageSample')
.load(function(){
alert($('#imageSample').width());
alert($('#imageSample').height());
})
.attr('src', 'http://www.gimp.org/tutorials/Lite_Quickies/quintet_hst_big.jpg?' + new Date());
});
</script>
<style type="text/css"></style>
</head>
<body>
<img id="imageSample" src="" alt="" />
</body>
</html>
Images might be cached, try this: http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js
Use something simple like so:
var loaded = false;
var len = $('#bgStage img.bg'), c = 0;
$('#bgStage img.bg').each(function(){
$(this).attr('src',$(this).attr('src') + new Date()); //Remove caching.
$(this).bind('onload',function(){
//Other Stuff here!
if(c == len)
{
HomeSlider();
}
c++; //Increment
});
});
Tell me how it goes :)
Each image has a complete property. Unfortunately not all browsers support it. They always report true, even if the image hasn't loaded at all. IE gets it right. ;-)
http://simon.html5.org/test/html/semantics/img/src/ (not mine)