I am trying to grab information from the page url to set the src for a data file.
So, say page url is: page.html?x=data_file_3
(The ideas is I could change the url to access other data files: data_file_4, etc.)
I grab the "data_file_3" part of the url and put it in a variable:
(the code I use for this works fine -- so result is)
folder = "/data_file_3/content.js" -- the content of this file is just an array
Then I try this:
<script id="url" type="text/javascript"></script>
<script language="javascript">
...
var u = document.getElementById('url');
u.src = folder;
...
</script>
But this doesn't work (the array data does not show up on the page). I put this code right where I used to hard code:
<script type="text/javascript" src="/data_file_3/content.js"></script>
The hard-coded version works. Any ideas about how I can do this?
Sounds like you are trying to create script tags dynamically.
var scr = document.createElement('script');
scr.src = 'script_path';
document.getElementsByTagName('head')[0].appendChild(scr);
You can wrap this in a function where 'script_path' is whatever you're path you're passing in.
Note also that 'text/javascript' is not required. All browsers understand that its javascript.
Related
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);
})()
I try to embed this zippyshare player
<script type="text/javascript">var zippywww="54";var zippyfile="JnIxIFUy";var zippytext="#000000";var zippyback="#e8e8e8";var zippyplay="#ff6600";var zippywidth=850;var zippyauto=false;var zippyvol=80;var zippywave = "#000000";var zippyborder = "#cccccc";</script><script type="text/javascript" src="http://api.zippyshare.com/api/embed_new.js"></script>
into a html file on my pc! When I do this and open it, it will show nothing!
Any idea to do this or why it don't work?
Thanks a lot
This is old but kind of interesting since their embed code didn't work out-of-the-box for me either.
Here's how I managed to embed the Zippyshare player into my html for anyone facing this same issue.
If you look at the embed code, there is this <script type="text/javascript" src="http://api.zippyshare.com/api/embed_new.js"></script> at the end of all the declared parameters. Copy that url http://api.zippyshare.com/api/embed_new.js into your browser and there's the iframe you are looking for... right?
This is what it looks like:
var a = navigator.userAgent||navigator.vendor||window.opera;
document.write("<iframe height=\"92\" width=\""+zippywidth+"\" frameBorder=\"0\" src=\""+window.location.protocol+"//api.zippyshare.com/api/jplayer_embed.jsp?key="+zippyfile+"&server=www"+zippywww+"&width="+zippywidth+"\"></iframe>");
Somehow, however, your webpage never receives this. So I copied that part and pasted into my html code, replacing the zippyshare script call and modifying it a bit (replacing escape characters with single quotes). So my html now looks like this:
<body>
<script type="text/javascript">
var zippywww="20";
var zippyfile="CyeL81Cn";
var zippytext="#000000";
var zippyback="#e8e8e8";
var zippyplay="#ff6600";
var zippywidth="100%";
var zippyauto=false;
var zippyvol=80;
var zippywave = "#000000";
var zippyborder = "#cccccc";
var a = navigator.userAgent||navigator.vendor||window.opera;
document.write("<iframe height='92' width='"+zippywidth+"' frameBorder='0' src='http://api.zippyshare.com/api/jplayer_embed.jsp?key="+zippyfile+"&server=www"+zippywww+"&width="+zippywidth+"' allowfullscreen></iframe>");
</script>
<!--script type="text/javascript" src="//api.zippyshare.com/api/embed_new.js"></script-->
</body>
It works, BUT I still wouldn't recommend it as it defeats the core purpose of having an api call. So this is not as much an answer as it is a very temporary fix :) while you figure it out or while Zippyshare figures out what to do with all those unused customization parameters you specify.
I have an html page, I need to add some reference to JS files in the head of the html.
The following code is working, but the scriptTVKeyValue is always being added before the tag
I would like to add instead directly after
Any idea what I am doing wrong here?
<head>
// I want reference added here
<script src="js/jquery.js"></script>
<script src="js/json2.js"></script>
// Reference to file added here
</head>
// APP_MAIN.onLoad()
var scriptTVKeyValue = document.createElement('script');
scriptTVKeyValue.type = 'text/javascript';
scriptTVKeyValue.src = '$MANAGER_WIDGET/Common/API/TVKeyValue.js';
head.appendChild(scriptTVKeyValue);
Look at http://www.jspatterns.com/the-ridiculous-case-of-adding-a-script-element/
You should have the answer
Solution using jQuery:
//Take the refference to the previous node
var $jsFile = $container.find('[src="js/jquery.js"]');
var fileName= '$MANAGER_WIDGET/Common/API/TVKeyValue.js';
// Insert the script
$jsFile .insertAfter($('<script>')
.attr('type', 'text/javascript')
.attr('src', fileName));
If you are happy/allowed to use a JS library, then you can load the scripts with requireJS It has advanced features to do this: it will enable you to call functions after your dynamically added script is loaded.
i have an object element in my html body to show an Active reports which exports to a .pdf file. I need to use javascript to automatically print the pdf out to the client's default printer and then save the pdf to the server:
<script language="javascript" type="text/javascript">
// <!CDATA[
function PrintPDF() {
pdf.click();
pdf.setActive();
pdf.focus();
pdf.PrintAll();
}
// ]]>
....
<body onload="return PrintPDF();">
<form id="form1" runat="server">
<object id="pdfDoc" type="application/pdf" width="100%" height="100%" data="test.aspx?PrintReport=yes&SavePDF=yes"/>
</form>
</body>
With the data hard-code in the object tag, everything run without a problem.
The problem now is that I need to pass querystring to this page dynamically. I tried to set the attribute data in the javsacript to pass the querystring. The querystring value passed successfully, but the data attribute does not seem to be set. I get a blank page.
pdf.setAttribute("data","test.aspx?PrintReport=yes&SavePDF=yes&AccNum="+AccNum);
Does anyone have a clue how I can set the data attribute dynamically to pass in querystring?
Thanks,
var pdfObj = document.getElementById('pdfDoc');
pdfObj.data="test.aspx?PrintReport=yes&SavePDF=yes&AccNum="+AccNum;
As far as the data attribute you're doing everything fine. Here are some examples:
http://jsfiddle.net/3SxRu/
I think your problem might be more to do with the order of execution. What does your actual code look like? Are you writing over the body onLoad function or something?
Also, I assume using the data attribute is a requirement. HTML5 defines data-*. This attribute isn't really valid. Again, maybe your system requires it.
I suspect that things are happening out of order. Try waiting until the onload event of the window before adding the embed.
Also, I suggest using a script like PDFObject to handle the embedding since it is a reliable way to embed PDF across all the various browsers out there. For example you might have something like the following:
<html>
<head>
<title>PDFObject example</title>
<script type="text/javascript" src="pdfobject.js"></script>
<script type="text/javascript">
window.onload = function (){
// First build the link to the PDF raw data ("bits")
// getQueryStrings assumes something like http://stackoverflow.com/questions/2907482/how-to-get-the-query-string-by-javascript
var queryStrings = getQueryStrings();
var reportNameParamValue = queryStrings["reportName"];
var pdfBitsUrl = "getReportPdfBits.aspx?reportName=" + reportNameParamValue;
// just in case PDF cannot be embedded, we'll fix the fallback link below:
var pdfFallbackLink = document.getElementById("pdfFallbackAnchor");
pdfFallbackLink.href = pdfFallbackLink;
// now perform the actual embed using PDFObject script from http://pdfobject.com
var success = new PDFObject( {
url: pdfBitsUrl;
}).embed();
};
</script>
</head>
<body>
<p>It appears you don't have Adobe Reader or PDF support in this web
browser. <a id="pdfFallbackAnchor" href="sample.pdf">Click here to download the PDF</a></p>
</body>
Is there any way that in an external javascript file, can know the host of the file?
For example, if I have the site http://hostOne.com/index.php, the code of the file index.php:
<html>
<head>
<script type="text/javascript" src="http://hostTwo.com/script/test.js"></script>
</head>
<body>
<div>...</div>
</body>
</html>
I need that in the file test.js can know the host http://hostTwo.com.
Thank you.
EDIT
or it can know the tag "script" which was called?, with this option I can analyzes the tag and get the "src" attribute. But I don't want to depend on the name of the file test.js and analyze all the tag script that contains the site.
*Solution based on the code of #Armi *
Html:
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script id="idscript" type="text/javascript" src="http://hostTwo.com/script/test.js"></script>
</head>
<body>
<div>...</div>
</body>
</html>
code in JS
var
url = $('head').find('#idscript').attr('src'),
host = url.replace(/(\/\/.*?\/).*/g, '$1');
console.log(host);
I've got an idea (the snippet based on jQuery):
var yourScriptTag = $('head').find('script[src$="jquery-1.7.1.js"]').eq(0);
var theHostnameOfYourScript = $(yourScriptTag).attr('src').replace(/(http:\/\/.*?\/).*/g, '$1');
alert(theHostnameOfYourScript);
jsfiddle example: http://alpha.jsfiddle.net/XsJn8/
If you know the filename of your script (and if this is always the same and unique) you can use this snippet to get the hostname.
If this path is relative (and contains no host) you can get the hostname with a simple location.hostname
Sorry, not possible. The content of the script is downloaded and after this it is fired. At this point the script "thinks" he is at your site.
Of course unless the host is hardcoded in the script.
This is not possible, because the JavaScript code is executed client-sided. You could propably parse it somehow out of your URL but, I don't think either that this is very useful and possible.
Inside test.js, you can use :
var url = document.URL;
then parse the url result.
You can't make cross-site scripting, so if you need more sophisticated stuff, you could write your javascript in php and call :
<script type="text/javascript" src="http://hostTwo.com/script/test.php"></script>
But that's not standard.
Anyway,, the solution is on the server, with a designed proxy.