Load javascript within a google map info window HTML content - javascript

I would like to load a javascript script within a google map info window HTML content but, for reasons I don't understand, the script is not loaded.
I generate my infowindow like that :
var info_window = new google.maps.InfoWindow({"content":"<script type=\"text\/javascript\" src=\"\/path\/to\/js\"><\/script>"});
I precise that the javascript path has been tested.
Is it possible to load javascript script like that? If yes, what's wrong ?

Are you using jQuery?
If so, you could add the script anywhere else in the document besides the infowindow and use .ajaxComplete() to target some script to the infowindow after the ajax call has finished.
http://api.jquery.com/ajaxComplete/

Related

How to feed code into iframe without a URL or FILE?

I'm trying to create a visual editor where the user creates a 3D scene, and my application writes the code for the project itself. I want to create a testing feature where the code that was generated is run. I've looked into using iframes, but as far as I know, you need a specific URL for iframe.
Here are some ideas/solutions I've come up with:
Is there a way to manually feed code to an iframe, without a file or URL?
Is there any other easier way to accomplish this task?
Can this be done without server side code?
Let me know if you need any more information. Thanks!
Yes it is possible however a much simpler way would be to just create another html file somewhere on your server/host and just disallow external access to it so it's only accessible from the iframe.
You have to use an script to give code to an iframe without a source file like this:
<iframe id="my-iframe"></iframe>
<script>
document.getElementById("my-iframe").contentDocument.write("<h1>Hello World</h1>");
</script>
Change the JavaScript to this to overwrite all of the content of the iframe:
var iframe = document.getElementById("my-iframe");
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
iframeDocument.body.innerHTML = "<h1>Goodbye World</h1>";
This overwrites all the content of the iframe with your own.
This will work but it will be a big pain to format the html from the iframe. Also as far as I know this is the simplest way that fits your needs.

Injecting chrome extension UI using shadow DOM

I am very new to HTML and the complete web world wrt development. I am trying to create a chrome extension and have decided upon showing the extension UI to the user by injecting a content script when the browser action is clicked. I have created an HTML page for the UI to be shown and now I need to load this HTML page as a small widget somewhere on the right top of the current page (to appear like a popup). From the different things looked up on the internet, I have decided to use shadow DOM but have no clue how to do all this. Can someone help me with a sample code to help me go ahead with this? I am not able to write a javascript that would be used as the content script to do the above mentioned job.
Edit 1: After some more reading, I found out out that we need to create the element hierarchy using javascript and cannot directly make use of any created HTML page. Is that correct? And if we have to make use of javascript, should make use of calls to document.createElement and add element? or document.write?
Just compiling reference from the responses I've got in this thread:
My Background.js:
function hello() {
chrome.tabs.executeScript(null, { file: "injectedScripts/jquery-2.1.3.min.js" }, function () {
chrome.tabs.executeScript(null, { file: "injectedScripts/a.js" });
});
}
// Supposed to Called when the user clicks on the browser action icon.
chrome.browserAction.onClicked.addListener(hello);
Injected Script a.js:
$.get(chrome.extension.getURL("popup.html"), function (data) {
//$(data).appendTo('body');
// Or if you're using jQuery 1.8+:
$($.parseHTML(data)).appendTo('body');
});
Also added popup.html and a.js paths to web_accessible_resources in manifest.json
For Chrome extension content scripts you'll only be able to inject JavaScript/CSS. You won't be able to have you're own HTML popup page like when using browserAction.
With JavaScript you'll need to dynamically create elements and insert them into the DOM. You're on the right track. You can use document.createElement or a library like jQuery to help with DOM manipulation as you get more familiar with web dev.

Javascript onload after redirect

in my Javascript code I am loading a page, and then would like to perform some functions. I tried to use solutions like window.onload, but that is after my html (blank page with just the JS) loads, I need the function to perform after the page I am reffering to is loaded.
I am using this code:
this.document.location.href = myurl;
And after this loads, I would like to call some function. Is there a way to do so?
Thanks
EDIT:
I can not edit the target page source code.
When you change the value of document.location.href, you are essentially doing a redirect.
You can either just do whatever you want to do within the loaded page itself or if you don't have cross domain issues, do xhr of the page you're wanting to load dynamically, query the body, replace content of your current body and also replace head contents i.e. style, title and scripts etc. You could then execute any script you want.
Extra note: This is quite a tricky thing to do, I've done this a few times before - and its proven quite problematic due to the fact that you don't actually get a fully parsed document object that you can just query so simply, you only receive a huge string. One hack that I've thought of using is actually just loading everything within an iframe allowing easy querying which is actually documented - extra reading here
window.load takes forever to fire because it waits for all images and assets to load on the page.
It sounds like the best solution for you would be to poll for the document to be finished loading. Here's a simple example:
(function poll(){
if(document.readyState === "complete"
{
// Your code here
}
else
setTimeout(poll,500);
})();
Place the 'window.onload = myFunction(){...}' inside the page, which will be loaded.
this.document.location.href
will open the page like you typed it into the browser address bar and your onload-script in the old page will not be executed in the new one.
By the way, you can shortcut it to document.location = myUrl
See the Document-API at Mozilla

Load javascript before Iframe

In this page: http://www.depositosalto.com.br/lojas.php, I have a javascript to resize a div and a iframe containing a google maps location. Happens that the javascript is executed only after the iframe is loaded. How I do to the javascript be executed first?
EDIT: The javascript is not to resize the iframe, but another div with the content with id = "conteudo".
You can calculate the proper size of the IFRAME and then generate the IFRAME tag using JavaScript. This will guarantee that your IFRAME will appear only after JS code executed.
P.S. Use tag to make sure that people who has JavaScript turned off will still see the IFRAME with Google Map.
Use the <body onload: > option. This triggers when the page is first loaded.

Load Google Map through JQuery Load?

Where in the flow of execution does the initialize() function need to appear in the code to allow a Google Map v3 API map to be loaded through a JQuery .load() call.
The code I have at the moment looks like this
$('#maplink').click(function(){
$('.fades').fadeOut('slow');
$('#googleMap').show();
$('#googleMap').load("map.html");
initialize();
});`
However, this isn't initializing the map after the AJAX call.
Any help would be appreciated :)
This is a very old question, but for anyone who ends up here, loading a .html page into a div is not the right way to dynamically load a Maps API map. Here's how it should be done:
First, put all of your Maps API script in the host page - the page that has the #googleMap div. Or, if you want that script itself in a file that you load asynchronously, put it in a .js file and load it with $.getScript().
Then, if you want to load both the Maps API and the map asynchronously in response to your button click, use the code from this asynchronous Maps API example.
In that example page, you won't be using this line:
window.onload = loadScript;
Instead, you'll call the loadScript() function from your click handler:
$('#maplink').click(function(){
$('.fades').fadeOut('slow');
$('#googleMap').show();
loadScript();
});
where loadScript() is the Maps API loading function from the example.
In fact, you could use $.getScript() to load the Maps API - just give it the URL used in the loadScript() sample function. That loadScript() function is pretty much equivalent to $.getScript() except for the hard coded URL.
You'll also need to change things in the initialize() function in that example to match your page, of course.
I'm not very good with jQuery, but I'm not really sure why you want jQuery to load the map. If you are trying to make the map load asynchronously google provides a way https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API Other than that. I can't be much help. Sorry
The initialize() call to google maps can be added as a script inside map.html and then when jquery includes the html it will execute the javascript.
Alternatively, you could do the following
$('#googleMap').load("map.html",function(){
alert('map is loaded and ready');
});
The issue that you are having is that the load call is asynchronous and therefore, when initialize() is called your ajax load probably has not completed.

Categories

Resources