Question

I am implementing a bookmarklet which communicates with a iframe through a JSON-RPC protocol.

However some sites, such as cnn.com load JSON2 into window.JSON although the browser already has a native JSON object.

The problem is that within my iframe I would not like to follow the same bad practice, and JSON2 does not seem to be compatible with the native JSON on Mozilla Firefox and Chrome:

So when I run stringify on the native JSON and JSON2, I get the following results:

JSON.stringify({key: "value"})

JSON2

{key:"value"}

Native JSON

{"key":"value"}

(Key is wrapped in ")

---

The problem is that the native JSON does not like it when the " is missing in the JSON2-produced string and throws an error:

Mozilla Firefox: SyntaxError: JSON.parse: expected property name or '}'

Google Chrome: SyntaxError: Unexpected token k

To solve the problem for good, I need to make sure that I use the same JSON library to encode the string as I do for decoding it.

One way of doing it is to make sure to use JSON2 or JSON3 on both sides, but I’d like to use the native json library where possible.

So now that sites like cnn.com have overriden the native JSON library, how can I get back to it?

I could perhaps create an iframe that points to the same domain and fetch the JSON object from its contentWindow, but that would be highly inefficient.

Isn’t there a better way?

Answer 1

not sure if i understand your problem correctly

if you place an empty iframe like this

<iframe id="testFrame" name="testFrame" src="about:blank" style="display:none;"></iframe>

then you can also call from js

testFrame.JSON.stringify(obj);

the only problem is that if you use it in https: src could be javascript:false if you need to support IE6

EDIT: I still think i don’t deserve the answer being accepted, so i’ve come up with a modified version of your code

(function($) {
  var frm;
  $.getNative = function(objectName, callback) {
    if (!frm) {
      frm= $("<iframe>", {
        src: "javascript:false",
        style: "display:none;"
      }).appendTo("body").load(function(){
        callback(this.contentWindow[objectName]);
        // $(this).remove(); <-- this is commented to cache the iframe
      });
    }
    callback(frm[0].contentWindow[objectName]);
  }
})(jQuery)

this will enable you to use $.getNative() multiple times in a document without recreating the frame each time.