Preventing CSS of Jquery Dialog content from being applied to main window - javascript

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.

Related

Is there a way to load a page with static header and footer, yet changing content body

I need to make a webpage where the main.html loads a page with a header and footer that will remain steady after I click on some navigation links, but only changing the body content, all this, using Javascript. The body content comes from another html document in the same folder. I've seen some answers to this, but very old ones using PHP. Please help.
BTW, I'm not using server yet, only loading from file with Chrome. Basically I want to replace the whole body of the page with the body of another html.
You can change part of a website by javascript and load content from other urls using ajax.
https://www.w3schools.com/js/js_ajax_intro.asp
And you can use jQuery lib to perform the ajax calls:
https://www.w3schools.com/jquery/jquery_ref_ajax.asp
The ajax calls can be to a server (this includes firebird and other content from the cloud) or to some files of yours.
It's not the only way, you could also have a look at iframes to see whether they fit your needs.

How to sandbox a div element?

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?

Apply styles to an jquery included html file

I am trying to perform a jquery load of a html page into the main body of a page.
Using a div named sidebar_menu that is in the middle of the page,
i am performing a jquery load at the end(bottom) of the page.
$("#sidebar_menu").load("/sitemenu.html");
$("#sidebar_menu").page();
This kinda works... the content is displayed, but the menu does not have the javascript functionality (expand, collapse, etc) applied to it. The styles have been applied, but the functionality of the menu is not there.
I can copy the contents of the html in place of the div, and the menu operations work.
Am i loading the included file too late in the stack? currently using the
jQuery(document).ready(function(){
$("#sidebar_menu").load("/sitemenu.html");
$("#sidebar_menu").page();
});
but is there better area to load the html file into the DOM, as the .ready seems to be too late in the page assembly stack to be operational.
thank you
There are many JQuery methods that strip Javascript. I learned it the hard way. Look into that. It may not be the problem you are guessing. The way around it is to not get the JS generated on the server side but to have it on the client side with parameter, config, etc. values passed as some DATA- element values from the server side for some HTML elements. That string that you assign to DATA- can be a JSON string too.
You should use jQuery .on() method see http://api.jquery.com/on/
I am not sure how your code looks like. But here is the idea. Take the closest container (that exists in DOM) of the element that will be loaded (not in DOM at that moment) and on that asign selector and action for elements to be loaded.

Using javascript to remove div class

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.

Trigger an Event in javascript before objects finish to load

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.

Categories