I have a tabbed panel where onclick on a specific tab i need to load three js files and a html file into current DOM and execute a method related to those js and html file.
The html file contains templates and need to be loaded into a hidden iframe.
I am able to load the same by appending the respective tags to the body but i need to execute a function after all the files are loaded.
How to get the event after all the files being loaded.?
--------------- New problem ----------------------
Im geting the event successfully after loading the files.
I have below problem.
I have a html file im loading as above and giving the content to a dynamically created iframe as follows
content = document.createElement("iframe");
content.style.display = "none";
content.src = 'data:text/html;charset=utf-8,' + encodeURI(responseText);
My base protocol is https. When the protocol is http im getting no error. Now im getting the following error.
The frame requesting access has a protocol of '', the frame being accessed has a protocol of 'https'. Protocols must match.
Please help.
You hinted at the solution in your last sentence:
Trigger an event!
Register a handler that will wait for your 4 custom events, keep track of which were already received via a global array and execute your function when all required events were triggered.
Of course you will trigger() a custom event at the last line of every one of your asynchronously loaded files.
Related
We are using evoPDF to convert our AngularJS form to PDF. Since the content on the page loads after few service calls, we understood that we need to use the delayed/Manual triggering mode options from evoPDF.
Below is the javascript that needs to be executed after the required delay or the content is loaded completely:
if (typeof evoPdfConverter != "undefined") {
evoPdfConverter.startConversion();
}
However, when we have the above script on an external JS file and refer the JS file on the main html page, the conversion fails. But when we add this script in the main html page itself(internally), the conversion works.
Is this an issue with evoPDf or any additional scripts to be added? We cannot add any internal scripts on our html page as all the pages are generated dynamically.
I am trying to migrate images with a small chrome extension i have built. the extension consists of 5 files:
popup.html - the plugin html document
Has some html buttons
also has script link to my settings.js file that listens for the image downlaod button to be clicked and send a message to my content script : run.js to find the images
run.js - content script ( has access to the webpages DOM ).
This script recieves the message from run.js which then finds all the images names and image links i want to download. It puts them into an object and sends them via message to the backgorund script : bootstrap.js
bootstrap.js - runs the background page and has access to the chrome api.
var Downloads = [];
chrome.extension.onMessage.addListener(function(request, sender, sendResponse)
{
if(request.message.method == 'download'){
for( var d = 0; d <= request.message.imageLinks.length; d++ ){
chrome.downloads.download( {url: request.message.imageLinks[d],
filename: request.message.imageName[d]}, function(id){
});
sendResponse('done');
}
}
});
This all works fine and dandy. It loops through the images and downloads them.
What i need to be able to do now is: Take the images i just downloaded, and insert them into the file upload fields on the other website (which i have open in another tab) which have the same field names ect..
I see chrome has a
//Initiate dragging the downloaded file to another application. Call in a javascript ondragstart handler.
chrome.downloads.drag(integer downloadId)
At first i thought this might work since you can manually drag the downloaded image into the html file upload field without having to click and select the file. But i can't find any documentation / examples on it.
Does anyone know it is possible to get accomplish this with javascript / chrome api?
First you need to access the content of the files you downloaded.
For that, you need to add a permission to file://*in your manifest file.
Then you can loop through your downloaded files with chrome.downloads.search for instance and get each file's path in the system (DownloadItem.filename property). For each file, make a GET XMLHttpRequest to the url file://{filepath} to get the file's content.
Once you have that content, you can convert it to a DataUrl and programmatically add the file to the FormData of your form (not the actual inputs though, just the FormData submitted in the end). See this answer for this part.
I am sharing a script tag with client to deploy my web application on client's website.
Basically by this way, he can embed my app wherever he want on his site.
The script which I give him just calls one action method in my MVC application and receives a javaScript as a response.
As a fist step, this returned JavaScript inserts all js and css references (required by my application) in the client's head tag
function createScriptElement(src) {
var tmp = document.createElement("script");
tmp.src = src;
var head = document.getElementsByTagName("head")[0];
head.appendChild(tmp);
};
and then in second step, it writes the html content inside one dynamic div.
document.write(format("<div id='mycontainer'>{0}</div>{1}", AppHtml,initcalls ));
The "initcalls" contains the initial function in my app's javascript which I expect to execute immediately. So I put it in Script tag as below.
contents of initcalls are:
<script type=\"text/javascript\"> function icInitApp() { ..... }; </script>
The problem is: there are some dependencies in my application on the js references. The HTML is getting loaded before the head tag in client's page recognizes and loads the js references.
Is there any way to hold my (thus dynamically rendered) application's init function until all js references are fully loaded by head tag?
I tried giving setTimeout() with 5 seconds but it will not be proper solution accepted by client.
A similar kind of situation is discussed in the link below
How to detect if javascript files are loaded?
You can also try to use the $(window).load() event since this will be fired when the page is fully loaded.
$(window).load(function(){
//your code here
});
PS: Be aware that you will need to load the jQuery in your page to make the above code work.
You can try with jQuery:
$(document).ready(function()){
// Your code goes here
};
I have an website that pulls it's content from the server via ajax and injects new HTML into the page after the request completed, using the innerHTML property of Nodes.
I there a way, an event listener or something like this, which is called when the browser starts to load data which is connected to the freshly injected html.
If the freshly loaded HTML includes Images, linked Stylesheets, scripts or stuff like this, the browser starts loading again - can i supervise this "is loading flag", or do i have to parse the new HTML, find elements which could have an onLoad property?
Greetings philipp
I'm trying to trace how my GWT page loads
Tracing using Firebug after mymodule/mymodule.nocache.js has loaded a GET request is fired with request to cache.html file like this:
EF0C179631C4491034C07C47610CF86E.cache.html
I tried to hook on XMLHttpRequest via Javacript, I was able to intercept the loading of the module nocache.js and other resources on the page but not this cache.html
For example I was able to intercept the loading of a gif and extract its src attribute which is fired from a GWT generated img tag:
http://localhost:8080/MyModule/gxt/images/default/shared/blue-loading-3d.gif
So I was expecting that I can also intercept the loading of that cache.html.
I am wondering how this html was called. Anyone knows? Is it fired from a anchor "a" tag? Or other?
It's loaded in an iframe. Like that: iframe.contentWindow.location.replace(base + initialHtml);