24

When I'm trying to show using show() method in jQuery it's always throwing an error in snippet.

Error:{ "message": "Script error.", "filename": "", "lineno": 0, "colno": 0 }

enter image description here

But the same code works in Jsfiddle. I noticed the problem while creating a snippet for my answer. You can check the problem here in this snippet.

$('p').show()
p {
  display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>abc</p>

EDIT : Error in console

jquery.min.js:3 Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Sandbox access violation: Blocked a frame at "http://stacksnippets.net" from accessing a frame at "null". Both frames are sandboxed and lack the "allow-same-origin" flag.

Browser : Chrome Version 50.0.2661.102 (64-bit)
OS : Ubuntu 14.04

7
  • 1
    Repro on Chrome 51.0.2704.84 m (64-bit) on Windows 8.1. Looks like there's an error regarding frame communication in a sandboxed environment. You may want to copy and paste the text of that error from your console to the question so it's easier to read/search/etc..
    – Heretic Monkey
    Commented Jun 14, 2016 at 17:15
  • 1
    Works on Firefox 50.
    – Oriol
    Commented Jun 14, 2016 at 19:46
  • 2
    No-repro on Firefox 50 Win 7, Repro on Chrome 51.0.2704.84 Win 7
    – Dipen Shah
    Commented Jun 14, 2016 at 19:47
  • 1
    Repro on IE 11.0.9600.18231 on Windows 8.1 also, with a filename property (in the Error in the console) of "ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js".
    – Heretic Monkey
    Commented Jun 14, 2016 at 20:16
  • 1
    Repro Chrome 51 on Linux.
    – matsjoyce
    Commented Jun 14, 2016 at 20:48
  • @MikeMcCaughan who still uses IE so you care for that????? IE is only good for one thing, rcognising html versions, run an html script on it, if it doesnt run its HTML 5.
    – Sir. Hedgehog
    Commented Jun 15, 2016 at 9:44
  • 1
    I love these questions that seem to blur the line between meta and the main site.
    – Ajedi32
    Commented Jun 17, 2016 at 15:04

2 Answers 2

Reset to default
25

The problem is that that jQuery's show calls showHide, which calls defaultDisplay.

That function attempts to determine the default display of the element, e.g. inline or block.

To do that, first it calls actualDisplay. That uses getDefaultComputedStyle to retrieve the default style. This API is non-standard and only supported by Firefox.

Therefore, other browsers still need a way to know the default display. jQuery uses an iframe:

iframe = (iframe || jQuery( "<iframe frameborder='0' width='0' height='0'/>" ))
         .appendTo( doc.documentElement );
doc = iframe[ 0 ].contentDocument;

But accessing the contentDocument throws on Chrome in a sandboxed iframe.

On Firefox it returns null, which would be problematic too.

var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
console.log(iframe.contentDocument)

The possible solutions seem:

  • jQuery checks if contentDocument throws or returns null.
  • Browsers/W3C/WHATWG allow accessing the contentDocument of an iframe created inside a sandboxed iframe without allow-same-origin flag.
  • Stack Overflow doesn't sandbox stack snippets, or sandboxes them with allow-same-origin flag.
2
  • 5
    So, jQuery bug basically?
    – Bergi
    Commented Jun 14, 2016 at 21:52
  • 7
    @Bergi Partially. But I would like to be able to manually access contentDocument inside stack snippets. I had found this problem before, I had to use jsfiddle instead.
    – Oriol
    Commented Jun 14, 2016 at 21:57
2

Okay, here's something weird, the following snippet works fine in Chrome 51 on Windows 8.1:

Array.prototype.slice.call(document.getElementsByTagName('p')).forEach((item) => item.style.display = 'block');
p {
  display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>abc</p>

Or at least, it did when I copied the OP's snippet into this question and edited it. Now, whether it works later is anyone's guess... [still works after posting].

Note that I don't call any jQuery code, just replicate in plain JavaScript/DOM.

2
  • DId you mean display = 'block'?
    – Oriol
    Commented Jun 14, 2016 at 21:29
  • @Oriol Oops :). I was trying out a bunch of different ways of replicating... Thanks for catching that.
    – Heretic Monkey
    Commented Jun 14, 2016 at 21:39

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .