I hope I can explain what I would like to do a bit better than how I did with the question's title :)
I have a page whose content is dynamically generated. I would like to:
a- grab certain divs out of it,
b- wrap them with the markup of a standard html page (html, head, body, ...)
c- load the result into a separate browser window
I can do a & b but not sure how to do c. Any thoughts on how this can be done would be appreciated.
thanks
You can open an "empty" html document in a popup window, and then add the elements to that document. So, rather than creating a document and then displaying it, display an empty shell, and then fill in the content.
Found this tutorial after some quick googling: http://www.openjs.com/tutorials/advanced_tutorial/popup.php
(just don't use global variables like they do)
Related
I want to replace certain nodes with different HTML if javascript is enabled.
My problem is that for a short moment the old code is visible and then the replaced element shows up.
What would be a text-book solution for that? Where do I need to put the javascript, preferably jquery? Is it possible anyway?
No example code , just imagine a page with a bunch of deeply nested nodes..
just use
<noscript></noscript>
tags to display content that is shown when js is disabled
DOM operations are pretty slow and in some corner cases you may experience the blink of the old content. I see two solutions:
Use a preloader screen, e.g.: Create A Custom Preloading Screen. This way you can perform all manipulations on the DOM elements in the background.
If the content of your page is static you can use <noscript></noscript> tags and this way set the content for both situations (JavaScript enabled, JavaScript disabled).
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 have a Javascript greeting that greets new users with a drop down banner like SO has. It only becomes visible after 3 seconds and when the X is clicked it disappears. Since I have not put meta description tags, on every page Google shows that greeting as the meta data. I dont understand why Google is using this seeing as it is not loaded staight away, will this stop happening if i use meta description?
Should I use Meta desciption? On the upside it might help this problem, but then Google wont be able to dynamically fetch data from the site (which happens to be a forum). It so happens that it is doing this anyway and I dont know why?
Thanks!
My best guess is the text from your greeting is being added to the page (a wordpress plugin?) on the server side as visible (so it appears even if javascript is disabled), hidden by javascript on pageload, then just being shown after 3 seconds (i.e. it is really there already and as such is the first major text google finds).
Try changing your greeting plugin/code to generate the div containing the greeting message after page-load, or at least to append it to the end of the document (or apply style="display:none;" as an inline-style so Google can see it) on the server-side then tweak the js to show it. It would no longer greet visitors with js disabled, but would also allow google to reach your main content without encountering the greeting.
It does this because it's the first readable bit of text found when parsing the DOM. I'm not sure if there is a delay google uses before it saves the page state to its cache but that shouldn't matter. I actually use this 'feature' of google to allow me to manipulate what the site listing says in the search listings. If you want it not to show up just move the code for the message to the bottom of your <body>s node list (i.e. put it just before you close the </body>).
display:none won't do anything it has to be moved so that it's not in the first few readable lines of text when the DOM node tree is parsed.
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.
Im using DOM window ( http://swip.codylindley.com/DOMWindowDemo.html ) to create alerts. However the content that goes in the windows is under the id inline content.
However the js file doesnt do anything with this id and the content inside isn't showing up.
Is there a css file im missing because the window appears but with nothing in it?
p.s. I'm using example one
Unless you absolutely need to use this DOM Window plugin, I'd recommend just using simple javascript or jquery commands to achieve this rather simple task.
But anyways, since you're using example one, you need to make sure that the href on the a tag that you use for your Open DOMWindow function is pointing to the div that houses the content.