I have lot of pages in different domains that need to include some .js .css and html. I want to "remotely" update the included code.
So in those static pages I tought placing:
<script src="http://centraldomain.com/include.js" type="text/javascript"></script>
then in that file do:
document.write('<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><div id="results"></div>');
$('#result').load('http://domain.com/include-rest.html');
and in that html place all the html I want to insert in those pages, eg:
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/cupertino/jquery-ui.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/l开发者_JS百科ibs/jqueryui/1.7.2/jquery-ui.min.js"></script>
some html without <head> or <body>
Is this the best approach to take? Is there any cross domain or XSS attack security issue I'm not taking into account?
Thanks
Instead of managing your code loading using external resources, you can instead import a single file an use a resource loader to manage dependancies. Rather than having external scripts execute code (tripping same origin policies), you can manage everything in one place and side-step any cross domain issues.
yepnope.js is an asynchronous resource that would help. You can use test for whatever site your on, import files necessary, then test what site your on to determine if you need to execute any further code.
Take a look at http://yepnopejs.com/ -- here's a quick look.
yepnope([{
test : /* boolean(ish) - Something truthy that you want to test */,
yep : /* array (of strings) | string - The things to load if test is true */,
nope : /* array (of strings) | string - The things to load if test is false */,
both : /* array (of strings) | string - Load everytime (sugar) */,
load : /* array (of strings) | string - Load everytime (sugar) */,
callback : /* function ( testResult, key ) | object { key : fn } */,
complete : /* function */
}, ... ]);
精彩评论