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
Related
So I am working on a website trying to use jquery/ajax to load content into the home page. Current test site is [http://newconstructionflorida.net] the home & about me page work without any issue, however the property search link does not load.
The content/property-search.php file I am trying to load contains a script:
<script src="//idx.diversesolutions.com/scripts/controls/Remote-Frame.aspx?MasterAccountID=115580&SearchSetupID=143&LinkID=0&Height=2000"></script>
What am I missing to be able to get this script to execute when loaded via AJAX? If I insert it into the home page directly it works without issue so it must be related to the jquery/ajax.
Loading .js scripts via ajax is not a good idea since .js scripts functionality is always bound to the loaded HTML DOM and my not work properly if loaded asynchronously via ajax after the DOM is fully loaded.
What you can do is loading the script once the ajax response is completely received using javascript functions like getScript() or .append().
See this answer here on how to use javascript to append an external script to your page:
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.
A bit of an unusual setup:
I'm writing in an html page that in turn loads another html page, parses it, analyzes it, and displays information about it.
The parsing is fairly easy using jQuery. I just need to figure out how to load the external page - that is, when page A is displayed in the browser, it needs to load page B, analyze page B, and display information about page B.
Both pages are local (not served via a web server).
Both load and ajax from jQuery run into the cross-origin permission issue:
XMLHttpRequest cannot load file://localhost/Users/me/test.html. Origin null is not allowed by Access-Control-Allow-Origin.
I can load the page with a script tag, but then I don't know how to access it so I can parse it:
<script type="text/html" src="test.html"></script>
Any ideas?
Have you thought about using JavaScript/jQuery to create an iframe? (You can use CSS to make the iframe hidden to the end user.) Then you can listen for the iframe's onload event, and parse it through the iframe's contentDocument element (I believe).
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);
I'm especially liking the ability to require other javascript classes by using Google Closure, but I'm wondering if it's possible to use goog.require to lazy load other javascript classes. When I trying using goog.require after the page has loaded, it seems to refresh or go blank :(
Any way to get a script on demand, and maybe set it up with a callback, so I can run some javascript when it's done loading?
Closure Library ModuleManager:
https://github.com/google/closure-library/blob/master/closure/goog/module/modulemanager.js
goog.require is not designed to be used to load any script. However, there is nothing special in lazy-loading script files on demand. Simply create node dynamically and add it to your page:
function require(src)
{
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = src;
document.body.appendChild(script);
}
The above function will load the script from the URL specified by the src parameter.
The callback is another story. You do not get an event fired after a script is loaded. If you want to get notified when the script has loaded, you need to notify of the loaded script from the script itself. For example, you can call a predefined function on your page as a last statement in the javascript file you are loading. Once this function is called, you know the script has finished loading. To do that, however, you need to be able to modify the loaded script file.
A similar approach for notifying a script has loaded is used with JSONP. The JSONP data is retrieved using the same approach above - you add a dynamically created script node to the page. However, by default, returning data from the server does not cause a change of state. A function call is needed to indicate something has happened (e.g. the data has arrived). With JSONP, you specify the name of a function in the URL of the JSONP request. The server then returns a piece of javascript where the function you specified is called, passing the JSON data in an argument.
All this is to suggest you need to be able to call a function on page after the script has loaded.