title: how to prevent "operation is insecure" warning when dynamically inserting javascript into a page?
body: <p>I'm trying to add a block of meta, link and scripts to a jQuery Mobile page dynamically.</p>
  
  <p>The script includes a rule, I'm adding to a CSS style sheet via javascript (must be like this unfortunately).</p>
  
  <p>Looks like this:</p>
  
  <pre><code>&lt;script type="text/javascript"
  if ('addRule' in sheet) {
  sheet.addRule(".splash:before",
    "background: url("' + x + '") no-repeat center center fixed; " +
    "-webkit-background-size: 100%; -moz-background-size: 100%; " +
    "-o-background-size: 100%; background-size: 100%; " +
    "-webkit-background-size: cover; -moz-background-size: cover;" +
    "-o-background-size: cover; background-size: cover;", 0);
  } else if ('insertRule' in sheet) {
  sheet.insertRule(".splash:before { " +
    "background: url("' + x + '") no-repeat center center fixed; " +
    "-webkit-background-size: 100%; -moz-background-size: 100%; " +
    "-o-background-size: 100%; background-size: 100%; " +
    "-webkit-background-size: cover; -moz-background-size: cover; "+
    "-o-background-size: cover; background-size: cover;" + " }", 0); 
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>with <code>x</code> being the background image url, which can be set dynamically when the code block is appended to the page head.</p>
  
  <p>Problem is:<br>
  I'm getting this:</p>
  
  <pre><code>SecurityError: The operation is insecure. [Break On This Error]     
  slice.call( docElem.childNodes, 0 )[0].nodeType;
  </code></pre>
  
  <p>reported in Firebug.</p>
  
  <p>If I hardcode a URL for x it works fine, so I assume the browser complains about URL variables being used. </p>
  
  <p><strong>Question:</strong><br>
  Any idea how to circumvent this? I will need to pass in the URL dynamically.</p>