Coder Social home page Coder Social logo

docwrite's Introduction

Safely manage document.write() with events and functions

document.write() is still widely used in Javascript, especially by advertisers. This causes several problems:

  • can only write where the script is loaded from
  • can't edit text before writing
  • can't cancel writing
  • can't trigger events on writing
  • calls after the ready event will reset the page

To work around these issues, the docwrite plugin:

  • provides beforedocwrite and afterdocwrite events around document.write()
  • allows document.write() to be edited, redirected and even cancelled altogether
  • automatically redirects late document.write() calls to an invisible
  • provides $(element).docwrite() that redirects document.write()s in a specified function

You can use the event-based interface like this:

$(document).bind('beforedocwrite', function(event, data) {
    // redirect the write:
    data.target = $('#my_element');
    // Edit what will be written:
    if ( /pattern/.test( data.html ) ) {
        data.html = "you can change the text <i>however you like</i>";
    };
    // Cancel writing:
    if ( !confirm("Should we write this:\n" + data.html) )
        event.preventDefault();
});
$(document).bind('afterdocwrite', function(event, data) {
    alert(data.html + " was written to " + data.target);
});

You can use the functional interface like this:

$(element).docwrite( function(arg1, arg2) {
    document.write("my <b>html</b> will be appended to $(element)");
}, "passed to function as arg1",
   "passed to function as arg2"
);
$(element).docwrite(
    "<div>Appended to element</div>\n" +
    "<script type='text/javascript'>" +
        "document.write('nested document.write()s are handled correctly');" +
    "</script>"
);

The functional interface doesn't trigger docwrite events:

$(document).bind('afterdocwrite',
    function(event, data) { alert('event triggered'); }
);
$(window).load(function() {
    document.write("will trigger an event (and be appended to a hidden <div>)");
});
$(element).docwrite( "will not trigger an event" );

1.1.0. Added ability to process splitted nesteds scripts

$(element).docwrite("<script type='text/javascript' ");
$(element).docwrite("src='alert.js'></scr"+"ipt>");

$(element).docwrite("<div>Appended to element</div>" + "<script type='text/javascript'>" + "m='<div>nested '; document.write(m+'");
$(element).docwrite("document.write()s are handled");
$(element).docwrite(" correctly</div>');" + "</scr"+"ipt><div>");
$(element).docwrite('nezhdanchik</div>');

Initial release from Slando (http://www.slando.com) Development team. (http://plugins.jquery.com/content/docwrite-100)
Modified by m8rge

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.