How to append parts to an inline script URL using JavaScript? - javascript

I have a script (Google Maps, to be exact) that is loading dynamically, and for a couple of reasons, I cannot alter how this initially loads by default.
Through JavaScript, I would like to find the string libraries=places and change it to libraries=places,visualization after the fact
So, the originally output:
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?libraries=places">
</script>
Would be:
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?libraries=places,visualization">
</script>
Is this even possible?
Thanks In Advance

this solution should apply to yours as well:
How do I include a JavaScript file in another JavaScript file?
script.src = url; will be the line where you add the src url however you like

First of all Give the google map script tag an ID:
<script id="google_map_script" type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
Then do:
var google_map_script = document.getElementById("google_map_script")
google_map_script.setAttribute("src", "https://maps.googleapis.com/maps/api/js?libraries=places,visualization")
Edit: since apparently this isn't what is needed then what about this:
var script = document.createElement('script');
my_awesome_script.setAttribute('src','https://maps.googleapis.com/maps/api/js?libraries=places,visualization');
document.head.appendChild(script);
Also have a look into using postscribe.

Related

How to execute dynamic string in javascript?

I have dynamic string javascript tags to execute in head of html.
Tags as follow and this tags is dynamic comes from server as a string and I want to execute this javascript into head of html. How can I best achieve this?
<script async src="/content/js/file1.js"></script>
<script async src="/content/js/file1.js"></script>
<script> alert('Execute'); </script>
You have the right idea; the problem is that you can't combine an external script (using src) with an inline one.
You simply need two different scripts for this, making sure the inline one comes after the reference to an external script:
<script src=""></script>
<script type="text/javascript">
document.getElementsByTagName("script")[0].src = "http://" + location.host + "/content/js/file1.js";
</script>

Javascript: is it possible to read the raw code of external scripts?

Given a typical script tag:
<script src="foo.com/myscript.js"></script>
would it be possible to directly read the contents of myscript.js as a string or something?
For example:
<script id="myscript" src="foo.com/myscript.js"></script>
<script>
var inners = document.getElementById("myscript").//raw contents of myscript.js
</script>
No. You can read the contents of the inline script tag, because it actually does have content:
<script id="myscript">
var inners = document.getElementById("myscript").textContent;
</script>
But for the external JS, the script contents are not actually put into the DOM; you would need to re-fetch it using AJAX (it would normally be cached unless anti-caching measures were taken, so you would not really take much time to re-fetch).

How can I include a script with document.write?

We need to add a script to our web application. It basically adds an corporate menu.
So we've received a script to include in the body of our web application:
<!-- BEGIN NAVIGATION -->
<script type="text/javascript" src="https://intranet.local/?getCorporateJsMenu"></script>
<!-- END NAVIGATION -->
And the content of https://intranet.local/?getCorporateJsMenu basically looks like this:
document.write('<script type="text/javascript" src="..."></script>');
//....
document.write('<div>');
document.write('<ul>');
//...
document.write('<li>...</li>');
//...
document.write('</ul>');
document.write('</div>');
After having placed the <!--NAVIGATION--><script... directly into the HTML body, we were experiencing severe page load performance problems.
So our idea was to add the menu with JavaScript, when everything has already been loaded with something like this:
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://intranet.local/?getCorporateJsMenu';
var domparent = jQuery('#header').get();
domparent[0].appendChild(script);
With Firebug we see, that the script element has been added to the HTML content and the script has been loaded from the network, but somehow the document.write of the loaded script doesn't get executed. Why?
We cannot modify the contents of https://intranet.local/?getCorporateJsMenu since it comes from third party.
This happens because the script execution stops at the first found literal </script> tag, no matter if it was enclosed in the parenthesis. You need to obfuscate the ending script tag, for example:
document.write('<script type="text/javascript" src="..."><\/script>');
However, it seems you use also jQuery. Why not use the jQuery methods to load a script and add the content to a page rather than document.write()?
Here is an example of hijacking document.write() to bring 21st century loading performance to legacy scripts:
<script>
var writes = [];
document.write = [].push.bind(writes);
</script>
<div id=targ></div>
<script type="text/javascript" src="https://intranet.local/?getCorporateJsMenu"></script>
<script>
document.getElementById("targ").innerHTML = writes.join(" ");
</script>
I've used the patterns to support ads on a SPA site, as well as to cache embeds, and in one case to modify the content's style before injecting.
Try this:
document.write('<scr' + 'ipt type="text/javascript" src="..."></scr' + 'ipt>');

How can I read json content inside a <script> tag?

So when I want to put a Google +1 button on webpages, I would do this:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'zh-TW'}
</script>
But I am wondering, there is an object in the script tag, but it is also loading plusone.js! At the end the script can also get the object inside the tag. How does Google do that? Unlike normally I would not put anything inside. Normally I would do
<script type"text/javascript" src="script.js"></script>
Since the URL is known, it's simple enough:
JSON.parse(
document.querySelector("script[src='https://apis.google.com/js/plusone.js']")
.innerHTML.replace(/^\s+|\s+$/g,'')
);
That said, as Alohci pointed out in the comments, the last script on the page will be the last one loaded when the script runs, because (unless specified otherwise) scripts are blocking. Therefore, this would work:
var scripts = document.getElementsByTagName('script');
var data = JSON.parse(scripts[scripts.length-1].innerHTML.replace(/^\s+|\s+$/g,''));

Javascript loading but not running - rails 3.1

I have in my application layout file an external javascript file witch has several lines of code and at the end runs a function like BooManager.init() no big deal...
the problem is, it is not running the inside code on this javascript file.
this is how i use it:
<script type="text/javascript">
bb_bid = "1615455";
bb_lang = "en-US";
bb_keywords = "iphone4s, apple";
bb_name = "custom";
bb_limit = "8";
bb_format = "bbb";
</script>
<%= javascript_include_tag "http://widgets.boo-box.com/javascripts/embed.js" %>
but it didn`t do anything it was suposed to do...
i`ve tried in simple html file and it works... what am i doing wrong?
NOTE:
the default way in html is this:
<script type="text/javascript">
bb_bid = "1615455";
bb_lang = "en-US";
bb_keywords = "keywords, between, commas";
bb_name = "custom";
bb_limit = "8";
bb_format = "bbb";
</script>
<script type="text/javascript" src="http://static.boo-box.com/javascripts/embed.js"></script>
-- EDIT --
the result generated by rails:
<script type="text/javascript" src="http://static.boo-box.com/javascripts/embed.js"></script>
It's not evaluating the script when loading using the <%= method. I'm not familiar with that syntax, but from the effect, that's what it sounds like. It's treating the script as html rather than code.
jQuery has a script load function that will get a script dynamically from a URL and then eval() it to execute it.
UPDATED WITH SAMPLE CODE
Add jQuery to your app:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
Then use it to load your script:
$.getScript('http://widgets.boo-box.com/javascripts/embed.js');
UPDATE NUMBER 2
I was able to duplicate the problem in this fiddle: http://jsfiddle.net/7x2zT/4/
If what you are trying to accomplish is to get your parameters activated before the script shows the widget - the default one looks like a sidebar, whereas your parameters make it more of a banner, then just make sure you put your parameters above the <script src stuff.
If you must be able to load dynamically, then you're going to have to figure out where the bug lies in the embed code, or if there's some other activation method. That site's documentation doesn't seem to be in English, so I can't help with that.

Categories

Resources