|
|
|
|
Issue #89 (importNode(), Text Editors, Debugging Tools, jQuery)04/02/15
In addition to the cloneNode() method that I discussed last week, there's also a method called importNode() that lets you clone a node from an external document (e.g. one embedded in an iframe in the current document). For example, you could have HTML that looks like this in a file called import.html:
<div id="example">
<p>This is some example text to import.</p>
</div>
|
Then you have the following HTML in your primary document:
<iframe src="import.html"></iframe>
<div id="container"></div>
|
A script running on the latter document can use importNode() like this:
var iframe = document.getElementsByTagName('iframe')[0],
frameDoc = iframe.contentWindow.document,
frameNode = frameDoc.getElementById('example'),
imported = document.importNode(frameNode, true);
document.getElementById('container').appendChild(imported);
|
You can view this in action in this demo, which is on my own server so I can keep the origin of the imported node the same.
Grabbing nodes from external documents in this way doesn't seem to be difficult. From what I can see, importNode() isn't always necessary but apparently there are ownerDocument issues that are in play, which you can read about in this FAQ by the W3C.
Some notes:
- As shown, the first argument for importNode() is the node being imported. The 2nd argument is the "deep" Boolean, indicating if you want a "deep" copy or just the parent (same as with cloneNode()).
- You should always include the "deep" argument because, evidently, the default value has changed, so you'll get mixed results in old vs. new browsers if you omit the 2nd argument.
- The import action doesn't remove or otherwise affect the original node.
- Supported in IE9+.
See MDN's article for a little more info.
Did you like this JS/DOM tip? I've collected 70 previous tips into an E-Book:
70 JavaScript and DOM Tips for $5 (EPUB, MOBI, PDF) |
Now on to this week's tools!
Text Editors and Code Playgrounds
Codeply
A responsive design playground and frontend editor. Use, compare and test responsive frameworks and micro-libraries.
GitSavvy
"Full git and GitHub integration with Sublime Text 3."
Oceanic Next Theme
"Sublime Text color scheme ready for ES6, optimized for babel-sublime (former 6to5-sublime) package."
Cluckles
Allows Bootstrap themes to be edited in third-party Systems like CMS's.
esformatter
A JavaScript beautifier extension for GitHub's Atom text editor.
Codiad
"A web-based IDE framework with a small footprint and minimal requirements."
Testing and Debugging Tools
JSCS
"A code style linter for programmatically enforcing your style guide ... using over 90 validation rules, including presets from popular style guides."
logdown
"Debug utility with markdown support that runs on browser and server."
PhearJS
"Renders dynamic webpages using PhantomJS: fetch a page, render it and return a pretty JSON object."
ScreenShotApp
"Scheduled screenshots of any website. Delivered instantly to your inbox, Dropbox or S3 bucket."
ie8linter
"Lint websites for IE8 compatibility, with warnings for possible pitfalls."
ping.gg
"The world's most simple monitoring service."
wallaby.js
"An intelligent test runner for JavaScript that continuously runs your tests. It reports code coverage and other results directly to your code editor immediately as you change your code."
Colorable
"Color combination contrast tester. Takes a set color palette and shows contrast values for every possible combination ... Includes pass/fail scores for the WCAG accessibility guidelines."
DOMListener
Chrome extension. "Monitor, browse and filter all DOM changes with ease."
jQuery Plugins
datedropper
"Provides a quick and easy way to manage dates for input fields."
jQuery.scrollSpeed
"for modifying scrolling speed in modern web browsers. Supports vertical or horizontal scrolling direction, including user-defined easing."
jQuery Toast
"Show highly customizable notifications to the user."
jquery.easy-nav.js
"A simple, accessible multi-level navigation controller for mobile and desktop."
ContentBuilder.js
Converts a DIV element into an editable area, for use in web apps, CMS's, etc.
pagePiling.js
For creating one-page scrolling sites, with plenty of options and callbacks and compatible with tablet, mobile, and IE8 friendly.
jQuery Boilerplate
A jump-start template for your jQuery plugins.
jQuery Age
"Formats and tracks dates and times as human readable text."
EnjoyHint
Now at version 3.x, adds an interactive guided tour to your website or app.
A Tweet for Thought
A very good piece of advice from Ian Feather.
Suggestions / Corrections
Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
Before I Go...
I was under the impression that all single-word English .com domains were taken. Apparently not, and you can find one on this site. You might even improve your Scrabble skills while looking!
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
