I need to make changes to an existing project that uses iFrames to dynamically load external html files. However, the html files are part of the same project, not external sites. If I'm not mistaken, iFrames are considered a terrible way of loading html content unless they are used to actually display external sites.
I have looked into web components but apparently, browser support is still spotty and unfortunately, I need to support IE9.
I know that the JQuery load() method can accomplish this but in my online research, that doesn't often come up as a proper way of loading external html in general and a proper replacement for iFrames in particular.
Is there a reason why JQuery shouldn't be used here and are there better and established ways of doing this? For example, I once saw a framework that dynamically built the interface out of separate "partials" but I don't remember which framework that was.
It depends on the HTML -
If it's built like a full page - then iFrames are actually a decent solution - Also, iframes with the same origin let you have full control over the content from the parent, while still protecting CSS and JS variables which is pretty convenient.
If not - jQuery.load() will do the trick, you can also do it manually ofc, but if you already have jQuery in your project, just use it.
The load() function is almost always the best way to go, if you are encountering a specific issue using that function maybe you can share it?
Related
We have a legacy application based on EXT-JS.
We like to add new module into the existing application, using AngularJS and bootsrap.
My problem is that bootstrap’s CSS are conflicting with CSS of the legacy code.
The new module, which written using bootstrap and AngularJS, wrapped around by legacy code, so I need to import exists CSS and new CSS on the same page.
I thought of 2 possible solutions:
Having a prefix to bootstrap’s css file and apply it only to inner part of the page content (AngularJS, new module). The problem is that popup, and angular-bootstrap 3rd party component still interrupted by legacy CSS.
Having my whole inner page (AngularJS module) in separate IFrame, embedded into page that contains the legacy CSS.
It seems like using IFrame solves my problem, but I aware that using IFrame is discouraged, and I am looking for optimal solution for my problem.
Do you think that IFrame is a good practice in this scenario?
Do you have other proven solution?
Planning to use iframes just to get around the css conflicts - not a very good idea. Though iframes can come handy in some cases mostly its usage has been abused just to get around some issues easily.
Do you think that IFrame is a good practice in this scenario?
No. The only issue here is the conflicting css styles between bs and extjs. And planning to use Iframe to get around this is really a bad choice. As you are using angularjs I feel using iframe may restrict its usage to some extent. For instance,embedding it in iframe I think the navigation back and forward buttons wont work as expected, in case your are planning to use angularjs routing. And when using Iframe it will be very hard to debug front end issues.
Do you have other proven solution?
Well I do not have a proven solution but you already have mentioned an idea which may work easily. Bootstrap can be customized to any extent you want to using less variables.
For instance for your issue just namespace the bootstrap styles using less.
.bs {
#import "less/bootstrap.less";
}
And don't get into the mindset using less/sass to compile css is complex. Once you get used to it, this will make this will make FE developement much easier than before.
After reading about html5 template tag I started to think what kind of problems is it going to solve and how exactly will it make the web better.
It is not hard to get main ideas from the article:
content is inert (no image/video uploads, no scripts run)
can not accidentally manipulate template while it is in inert state
you can place it everywhere and grab it later
But each of these things has a drawback:
content is inert. This means that there is no way to preload my images (I also do not think that a lot of people put js scripts inside of their template)
can not manipulate template. This means you can not precompile it like you can do with handlebars
you can place it everywhere. But I was able to place <script type='txt/template'>..</script> everywhere as well.
So how is html5-template is going to address the problems of painful styling and theming which are stated in offscreen DOM technique or Security issues (XSS vulnurabilities) which are stated in Overloading script?
I just did a proof of concept/demo for a web app idea I had but that idea needs to be embedded on pages to work properly.
I'm now done with the development of the demo but now I have to tweak it so it works within a tag on any websites.
The question here is:
How do I achieve this without breaking up the main website's stylesheets and javascript?
It's a node.js/socket.io/angularjs/bootstrap based app for your information.
I basically have a small HTML file, a few css and js files and that's all. Any idea or suggestions?
If all you have is a script tag, and you want to inject UI/HTML/etc. into the host page, that means that an iframe approach may not be what you want (although you could possibly do a hybrid approach). So, there are a number of things that you'd need to do.
For one, I'd suggest you look into the general concept of a bookmarklet. While it's not exactly what you want, it's very similar. The problems of creating a bookmarklet will be very similar:
You'll need to isolate your JavaScript dependencies. For example, you can't load a version of a library that breaks the host page. jQuery for example, can be loaded without it taking over the $ symbol globally. But, not all libraries support that.
Any styles you use would also need to be carefully managed so as to not cause issues on the host page. You can load styles dynamically, but loading something like Bootstrap is likely going to cause problems on most pages that aren't using the exact same version you need.
You'll want your core Javascript file to load quickly and do as much async work as possible as to not affect the overall page load time (unless your functionality is necessary). You'll want to review content like this from Steve Souders.
You could load your UI via a web service or you could construct it locally.
If you don't want to use JSONP style requests, you'll need to investigate enabling CORS.
You could use an iframe and PostMessage to show some UI without needing to do complex wrapping/remapping of the various application dependencies that you have. PostMessage would allow you to send messages to tell the listening iFrame "what to do" at any given point, while the code that is running in the host page could move/manipulate the iframe into position. A number of popular embedded APIs have used this technique over the years. I think DropBox was using it for example.
I am tinkering around with jQuery and am finding it very useful and almost exciting.
As of now, I am referencing the jQuery script via Google's CDN and I store plugins I use locally in a static/scripts directory.
Naturally, each page has its own individual implementation of components that are required for the features it currently offers. I.E. the main page has the Twitter plugin whereas the login page has form validation logic and password strength metering. However, certain components (navigation bar) for example use the same script across multiple pages.
Admittedly so, I am not a fan of putting javascript code in the header of a page, but I rather prefer to have it in an external file (for caching, re-usability, and optimization purposes).
My question is, what is the preferred route for organizing the external files. I wanted to try and keep it to one javascript file for the entire site to reduce IO requests. However, I am not sure how to implement document ready functions on a conditional per page bases.
$(document).ready(function () { ... }
Is there some way to reference a page by some method (preferably id based and not a url conditional).
Thank you in advance for your time!
You should try REQUIRE JS.
This will allow you to load only those plugins the pages where you need them, and unload them again if they are not needed anymore.
Then again, it might be overkill. It really depends on the size of your project.
Paul Irish:
http://paulirish.com/2009/markup-based-unobtrusive-comprehensive-dom-ready-execution/
This will allow you to block your scripts by body class/ID and execute them automatically.
First you might want to use YUI Compressor or some other JS compressing tool. Then perhaps creating a resource file (resx) for your JavaScript is the way to go. Then just reference the resource within your code. This is the approach Telerik took for their RadControl ASP.NET AJAX control framework.
I have a need to display our application widget within a third-party website (think things like GetSatisfaction, UserVoice and other feedback widgets that people use).
What is the safest and most reliable way to do this? I can think of some criteria and issues already:
The code needs to be framework and language independent. Even though my app is ASP.NET, the 'launcher' will be run in any HTML page that belongs to our customers. So I suppose that limits me to HTML and Javascript only.
The function needs to be very easy to call. So that implies a <script scr='mywebsite.com/widget.aspx' ...> as the sole thing to give to my customer.
There is to be no use of CSS. Or rather, I can style things, but without a CSS file, as that could pull in styles that conflict with what my customer is running.
There must be no use of libraries such as JQuery. I mention this because I can imagine problems if we pull in a JQuery version that differs from our customer's, thus ruining their site with our code.
Ideally, is there a well established piece of code I can use to get started?
Probably the easiest way to isolate your widget from all of the customer's JS and CSS code is to embed it in an IFRAME.
If necessary, you can provide a script that will inject the IFRAME into the document. You can keep your variables isolated from the global namespace by encasing everything like so:
(function() {
//inject iframe into document.
})();