I'm trying to add a block of meta, link and scripts to a jQuery Mobile page dynamically.
The script includes a rule, I'm adding to a CSS style sheet via javascript (must be like this unfortunately).
Looks like this:
<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);
}
</script>
with x
being the background image url, which can be set dynamically when the code block is appended to the page head.
Problem is:
I'm getting this:
SecurityError: The operation is insecure. [Break On This Error]
slice.call( docElem.childNodes, 0 )[0].nodeType;
reported in Firebug.
If I hardcode a URL for x it works fine, so I assume the browser complains about URL variables being used.
Question:
Any idea how to circumvent this? I will need to pass in the URL dynamically.