On my site, there is an area where I load several different widgets via AJAX. Some widgets need an external JS script that the rest of my page doesn't so I'd rather not load that script until the window opens for that specific widget.
the ajax code is:
$.get(content_url, null, function(rawResponse, status, xhr) { // get new data
content_target.html(rawResponse); // replace with new data
loadingSomething = false;
});
The content loaded is:
<script type="text/javascript" src="http://www.bandsintown.com/javascripts/bit_widget.js"></script>
<script type="text/javascript">var widget = new BIT.Widget({"artist": "{{ id }}"});widget.insert_events();</script>
But when I do this, the widget doesn't load. I'm guessing it's because the external script isn't loading.
Any ideas on how to make this work? Keep in mind I'm loading several different widgets with their own external scripts, so it'd be tough to add that into the JS since that's standardized across all widgets.
Thoughts?
It's a bit of a headache to load scripts like this, especially if you're trying to make a cross-domain ajax request. Consider using HeadJS to improve load times without making things hellishly complicated.
JavaScript loader
Load scripts in parallel but execute in order
head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js", function() {
// all done
});
Head JS loads JavaScript files like images without blocking the page. Your page will be faster even with a single combined file.
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 am working on Phonegap application and basically I want to embedd an external webpage inside my html page, yes for me various options are available. I tried with <iframe> method, but I am getting below error:
Refused to display 'https://xyz.com' in a frame because it set 'X-Frame-Options' to 'DENY'
Since I don't have control over the server side, loading an webpage inside an iframe is ruled out.
I also tried with ajax method:
$.ajax({
crossOrigin: true,
url: 'https://xyz.com',
success: function(data) {
$( '#bodyFrame' ).html(data);
}
});
It works fine, but the biggest problem is it doesn't render CSS/Javascript, it only displays plain html.
I tried with <link rel="import" href="https://xyz.com"> now I am getting cross-domain issue.
My question is, is there a way to display an external website inside an HTML page with correct css and js rendering (I don't have control on this part on server side) without IFrame/embed/object tags? I searched lot of questions on SO, most of them tell to use ajax but this have css issue. Can anyone help me in this?
Well, I think that you have at least few options.
Do like I just did for my project where I need to be able to show whole pages offline: load the HTML for that page, iterate through it (with regular expressions) to find out all resource links (JS, CSS, images) and download those (store to file system). Once downloaded, change the URL to URI of your local file on initial HTML. After that show that HTML for user.
Few special things to mention about this way in no particular order:
Implement cache of your own to speed this up.
Use blacklisting for URLs that you don't want to download.
caolan's Async.js library is just great for this.
For CSS resources you need still to download images within it and change the links to those too.
Images can be converted just to Base64 representation inside HTML for less callbacks to handle.
This way you can use the iframes.
This is pretty much related to first one but go through the HTML on your success callback and get all the links for JS and CSS and use technique described here to reload those for you.
Here is summary of that method:
var fileref = document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", filename);
document.getElementsByTagName("head")[0].appendChild(fileref);
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
};
Ive been playing with the load, get, ajax and get scripts function.
The most appropriate to the majority of function where I intend to load in content on a page would be the load function. It is a simple and effective way of getting the relevant content from an associate page.
But since it does not include scripts and the new content does not respond to the pages ready. functions I was wondering if there was a simple enhancement we could make that would allow the scripts of the page to be refreshed to include loaded content.
Something like
function loadall(url,container){
$(container).load(url);
scritps.reset();
}
What would be the way of doing this.
Let's say I host a javascript file on my server at www.website.com/javascripts/application.js that I want 3rd party sites to load up.
On those third party sites, you could just add:
<script src="www.website.com/javascripts/application.js" type="text/javascript"></script>
but it would need to evaluate all of the javascript before fully loading the page.
Instead if the third party site had something like
<script type="text/javascript>
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', 'www.website.com/javascripts/application.js');
document.getElementsByTagName('head').appendChild(script);
</script>
would this make any difference in the page load time? Would it load the javascript file asynchronously?
What about if the site had
<script src="www.website.com/javascripts/dynamic_loader.js" type="text/javascript"></script>
which linked to a script that dynamically built the script tag linking to the application.js file as in the example right above this?
Which would be the best option and why? Is there a better way to load third-party javascript that I'm not aware of?
Your second option will load the script asynchronously and the page can display before the script has loaded. This can be an advantage if you're optimizing for page display time and no page initialization scripts need to use your script. This can be a disadvantage (and won't speed the overall page load up) if everything else just has to wait for your script to load before the page can be fully populated.
So, it really depends upon what the script does. A perfect example of something that can be successfully loaded asynchronously is Google Analytics because it's 100% stand-alone. Nothing else on the page depends upon it. When exactly it loads doesn't matter at all in relation to the page display.
An example of something that wouldn't really benefit from loading asychronously is a script that has an integral role in display the initial content or a script that has dependent scripts who have an integral role in the display of the initial content. Since you can't see the content until they are all loaded anyway, it doesn't really help things to make one of the asynch load.
Dynamic loading (your last option) is most useful when you only want to load modules upon demand (not necessarily when the page loads at all) when they are actually needed (if ever).