I was wondering if it is possible to remove the contents of a specific div class using javascript?
I would like to be able to access this div's content occasionally, so I don't want to remove it entirely but I'm worried that it will still take up page loading time, even if it has
'display: none' applied to it in the CSS. Is this correct?
Is there any JavaScript that will remove the page contents of a specific "div class" so that it does not slow down page loading time?
JavaScript works in the client, specifically, manipulating the DOM generated from the document loaded, that means, that if JS can see the object, it already took some time to be loaded.
If you don't want it to be loaded, the best way is to do is not to send it to the client, for instance, using server languages like perl, php, asp. etc.
Other way, is to have a frame in the page, with an empty src, and request that div after the document is loaded, that way, the effect is that the client doesn't have the load of that content in the firs place but will be available for your process later.
Bye
Removing elements with JavaScript won't affect your page's loading time. This is because the page is downloaded, and then the code removes the element after the page was loaded. It might even make it slower (slightly), since the browser has to execute such code to remove the element.
If you want to make the page loading time shorter, remove the element from your file, and then upload it again to your server.
You could then create this <div> dynamically by requesting it through AJAX (as Dr.Molle suggested), either using a library or plain JS.
Related
I am trying to build a content editor. This contenteditor will load a HTML document (with JavaScript) into for example a #result element. The problem with this, is that if inside this HTML element there is for example $("input").hide();, then all of my inputs are gone throughout the whole page, so not just inside the loaded HTML (my goal).
What I want to do with the editor is when a client clicks on an element that represents something in the database, the info of this element will popup and the user will be able to edit this. (So, if a user hovers over a form with the class "contact-form" (which is in the database, connected to the loaded page) a new window will popup with information about this specific form element.
Also, I cannot completely disable Javascript, since the loaded HTML might contain Javascript for styling etc.
My goal: Remove Javascript, that can be annoying when a user loads in an HTML file. Like an alert(); Also, remove the ability for the Javascript to edit somehthing outside it's own DOM.
P.S. I am open to better workarounds like using an iframe for this, BUT I want to be able to hover over elements in interact with them.
Edit: It seems that this question might be a bit too broad, looking at the comments. Summary of my question: How can I disable alert() for a specific div and how can I create a sandbox so that code inside a div, can only change elements from inside that div.
What you're looking for is HTML sanitization. This is the process by which you remove any dangerous content from a snippet of HTML on the server, before it's loaded in the browser. There are plenty of sanitization libraries out there that can strip script tags, object tags, etc. Just remember, you can't sanitize using javascript because by the time you've injected your script, another malicious script may have already loaded and run.
The only way to effectively sandbox a javascript environment is with iframes. You'll notice that websites like CodePen, JSBin and JSFiddle use them extensively. There's something called the ShadowDOM, which is the basis of Web Components, but it isn't very well supported yet.
To make it possible to run your own frontend scripts that allow for hovering, you can inject your script after your sanitization process. This way, if it's loaded inside an iframe your script will also be loaded.
Finally, alert() doesn't belong to any elements on the DOM. You can trigger an alert as soon as the page loads, for example. However, if you're trying to prevent alerts from popping up on user interactions, you could try removing all event listeners from a particular element. This won't be necessary if you sanitize the HTML of script tags, however, since the script wouldn't have had a chance to load so there won't be any event listeners.
You can use ShadowDOM to load an html document into a host node. See also WHY SHADOW DOM?
I'm using the jquery load function to switch out a div. Whenever I load a certain element via ajax that needs javascript to run -it won't work in the div. I know that this is because the element didn't exist in the dom on the initial page load.
I've googled for days and haven't found an answer that can give me an easy to understand explanation. Essentiallly, I'm told to just use .on or $getScript.
However, this doesn't seem to be the appropriate answer.
Since, each element loaded in the div has similar properties -I simply want to load the jquery library, and the same two external scripts in my index page's head section -and then make sure that those scripts stay "live" or append to the simple html content that is being externally loaded in the div via ajax.
So, for example, if page 1 has a div named bouncingcats, and page 2 has a div named bouncingdogs -that both require an external javascript named 'bounce' -I want to load the javascript file 'bounce' ONE TIME in the head section of my index page -and then dynamically swap out the div named bouncinganimals on my index page with either cats or dogs.
So far, it seems as if the only advice I'm getting is to just put the jquery library AND the bounce.js file at the end of page 1 and at the end of page 2. This, of course works -but it seems too redundant and of course slows down the ajax load.
Do you know of a way in which I could just load the jquery library and the external javascript page in my index page head once, and have them run when I load content via ajax into my div?
An issue that I have is that I didn't write the script bounce.js myself -and it is already minimized -so changing the script could prove to be extremely difficult. Is there something I can just wrap around the external javascript links themselves?
In my web application, I have written a cross-domain ajax call which is fetching an HTML page from a different domain. This newly fetched page is being rendered in a jQuery dialog using the following code $('#previewDialog').html(response).dialog('open');
This renders the response properly in the dialog. However, the response (HTML page) also has some CSS styles in it. These styles (generally BODY, INPUT etc) are getting applied to my main window (parent page) and distorting the complete view of the page.
When the dialog with the HTML page opens, the view of the parent page is completely distorted because of the CSS used in the HTML page (response of AJAX call) which gets applied to all the components. And when I close the Dialog, the parent page gets back into shape.
Is there anyway, by which I can prevent the CSS of the HTML page which is being displayed in dialog, not get applied to my parent page?
Trivial answer: have everything from the page that you pull in be wrapped in a div with a class not used elsewhere. modify the .css for that page so that it only applies to elements within a div of that class.
Edit: If you cannot control the css of the origin page, things become somewhat more complicated. your problem, though, is that you're injecting the HTML (including the css link) directly into your page. Instead, try the following:
Grab the HTML for the other page. Place it into a div off to the side that you're not using for anything else using the html() command.
Go into that div using the jquery DOM commands. Grab the portion of the page inside of the troublesome links, and pull it over to the $('#previewDialog') location. Destroy the contents of the working space div. If there is javascript or css that you need to preserve, have it entered (modified, if necessary - like with div wrappers) elsewhere in the page.
Now, this only works if the pages that you're being fed don't have their css or javascript changing with any frequency.
An alternate version of the same thing - while you have it as a response (a string format) use string manipulation tools to excise the css reference, rather than using DOM commands to pull what you need out of it.
More complicated/difficult version of the same thing (though somewhat more robust): Use string commands to slice out the css references (as with the alternate version) and then make another call using that css reference to acquire the .css file. Use string commands on the .css file to add in the div-wrapper limits as initially described, then insert it elsewhere on the page as an internal style sheet.
I am using jquery ajax to load content from one page into a div on the current one, similar to the way gmail switches between inbox, trash, etc. I am using jQuery's load method
$("#divGlobal").load("newPage.html #container");
to load the content I need into my div.
newpage.html #container also has associated javascript & css files associated with it. Right now I am loading them by appending the necessary <script> and <link> tags to <head> but it does not always work. The files always load (I am watching XHR info in Firefox) but do not always seem to work correctly.
For instance, if I load page1.html & associated files (including jQuery functions for UI), everything works fine. However, if I then load page2.html and go back to page1.html, the files load but the jQuery functions are not responding.
Is there a better way of loading javascript & css files associated with the content I am loading?
Reloading the same javascript that you have previously loaded may not do what you want because all the variables and functions are already defined from the previous load and some state may already be in place from the previous load. Loading it again into the same page doesn't start from scratch which is probably what you want.
If you control the pages you're loading, then you can write the javascript in a way that will work by just having the scripts in the content load specifically designed so that they set the state exactly how you want it and clean up any previously loaded state, but you would have to write them that way in order to work that way. This would include resetting any DOM modifications, event handlers, global variables, etc... that the first invocation of the script may have modified.
I was trying to write a global JavaScriptfunction which overrides any HTML object (img, iframe, links and so on) before it being loaded by the page. The purpose of the overiding action was to to change the SRC and HREF of these objects using the DOM to any other link.
Unfortunately I didn't find any solution to that without firstly loading the object and only then changing it by the onload event.
My second option was to change the SRC and HREF by matching these attributes with a regular expression and replacing the resultant values. I prefer not to do so because it's slow and consumes a lot of time.
I would be glad if someone can share with his/her experience and help me solve this out.
JavaScript only works within the DOM.
You could however, load the page via AJAX, get the content and do any string manipulation on it.
If you are trying to modify items that exist in the static HTML of the page, you cannot modify them with javascript until they are successfully loaded by the browser. There is no way to modify them before that. They may or may not be visible to the viewer before you have a chance to modify them.
To solve this issue, there are a couple of options.
Put CSS style rules in the page that causes all items that you want to modify to initially be hidden and then your javascript can modify them and then show them so they will not be seen before your modification.
Don't put the items that you want to modify in the static part of your HTML page. You can either create them programmatically with javascript and insert them into the page or you can load them via ajax, modify them after loading them via ajax and then insert them into the page.
For both of these scenarios, you will have to devise a fallback plan if javascript is not enabled.