0

I am trying to get something similar working as JSFiddle, where a user can enter js, css, and html code, and it will be rendered in a sandboxed iframe.

The path to the JQuery file works when I call it in the parent html file, and when I use the same url within the iFrame I do not get a 404 error.

I have tried both relative and full paths:

<script type="text/javascript" src="http://localhost:3000/javascripts/jquery-3.1.0.min.js"></script>

I can even open the jquery file within the iframe using the same url! /javascripts/jquery-3.1.0.min.js

I have gone through each of the solutions in this SO post, but none resolves the issue.

When I try to execute jquery within the iframe with sandbox settings I get an error:

Uncaught ReferenceError: $ is not defined

Please note I am also getting this warning (in case it is having an effect):

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

which the console link is showing this (from jquery's minified file):

....ajaxTransport(function(b){var c,d;return o.cors||Pb&&!b.crossDomain?{send...

I am not aware of any other ajax running, so at this point I'm not sure where the conflict is originating from.

html:

<iframe name="result" sandbox="allow-popups allow-scripts allow-same-origin allow-modals" frameborder="0" class="sandboxed" style="height: 0px; overflow-y: hidden; min-height: 300px;">
#document
<html>
  <head>
    <script src="/javascripts/jquery-3.1.0.min.js"></script>
    <style type="text/css">
       .test { display:inline-flex; padding-top:10px; padding-bottom: 10px; padding-left: 40px; padding-right: 40px; background-color:#cccccc; color:white;  justify-content:center; align-items:center; font-size:20pt; font-weight:lighter; font-family: sans-serif }
    </style>
      <script type="text/javascript">//<![CDATA[
          $('.test').text('works');
        //]]>
      </script>
    </head>
   <body>
    <div class="test">test</div>
   </body>
  </html>
</iframe>

Any help is appreciated!

Community
  • 1
  • 1
Ron I
  • 4,090
  • 8
  • 33
  • 64
  • 4
    Usually this is indicitive of jquery not being included correctly. Can you verify that /javascripts/jquery-3.1.0.min.js is the correct path relative to the iframe? – Mike Sep 09 '16 at 16:37
  • 2
    Open up the network tab, look at the requests, do you see a 404? – epascarello Sep 09 '16 at 16:38
  • @MikeC - I have gone through your referenced post, none of the answers resolve this question. It looks like this is somehow connected to the path not being the same when called from the iframe somehow. – Ron I Sep 09 '16 at 17:03
  • Try to open the js file directly by URL. yoursite.com//javascripts/jquery-3.1.0.min.js and tell me if it's being opened – Mojtaba Sep 09 '16 at 17:08
  • @Mojtaba - yes, although in your url you have two // slashes, when I use one or two it works fine: http://localhost:3000/javascripts/jquery-3.1.0.min.js returns: /*! jQuery v3.1.0 | (c) jQuery Foundation | jquery.org/license */ !function(a,b){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requires a window with a ... – Ron I Sep 09 '16 at 17:10
  • Oh, that two slashes was my typo. btw doesn't matter. if you can open http://localhost:3000/javascripts/jquery-3.1.0.min.js directly in URL, please view the source of your web page which is calling that js file and then, click on the js file in the source – Mojtaba Sep 09 '16 at 17:14
  • @Mojtaba here is the developer view source: , however, if I right click and click 'view source' on the page itself, I cannot see the contents of the iframe: – Ron I Sep 09 '16 at 17:18
  • You can right click on iframe and try to see the iframe source. I want you to click on the link which you see in the source – Mojtaba Sep 09 '16 at 17:19
  • @Mojtaba - thanks, I tried right clicking directly on the iframe in both chrome and firefox, and yet neither would allow me to view the source within the iframe. If I open in the developer console I can view the link within the iframe and I can successfully go to the file. – Ron I Sep 09 '16 at 17:23
  • @epascarello - there was no 404 error, it was because I forgot to add .js to the url in one of my tests. Once I corrected that, the 404 error went away. Thanks. – Ron I Sep 09 '16 at 17:32
  • @MikeC - the error is only happening within the iframe, not within the rest of this code. I reviewed your suggested link of it being a duplicate, and I am unable to find how that question is an identical match to the issue I'm facing, can you please clarify? Thanks. – Ron I Sep 09 '16 at 18:43

0 Answers0