How to load external css, js and append a div to the DOM from a bookmarklet?
I'm trying to build a bookmarklet that does the following:
1.)loads an external js, located on my server (done)
javascript:function%20loadScript(scriptURL)%20{%20var%20scriptElem%20=%20document.createElement开发者_开发问答('SCRIPT');%20scriptElem.setAttribute('language',%20'JavaScript');%20scriptElem.setAttribute('src',%20scriptURL);%20document.body.appendChild(scriptElem);}%20loadScript('http://127.0.0.1/main.js?x='+Math.random());
2.)this external javascript in turn, loads up jquery and jquery ui than adds a div into the current site DOM. (can't get this to work)
function loadScripts(scriptURL) {
var scriptElem = document.createElement('SCRIPT');
scriptElem.setAttribute('language', 'JavaScript');
scriptElem.setAttribute('src', scriptURL);
void(document.body.appendChild(scriptElem));
}
loadScripts('http://127.0.0.1/js/jquery-1.3.2.min.js');
loadScripts('http://127.0.0.1/js/jquery-ui-1.7.2.custom.min.js');
var head = document.getElementsByTagName('head')[0];
$(document.createElement('link')).attr({type: 'text/css', href: 'http://127.0.0.1/css/redmond/jquery-ui-1.7.2.custom.css', rel: 'stylesheet'}).appendTo(head);
$(document).ready(function(){
div = $("<div>").html("Loading......");
$("body").prepend(div);
});
The problem I'm having is that I can't append a div with a certain id, The idea is to use dialog() function of jqueryui in order to have a resizable, movable dialog box appear on any site I use the bookmarklet on.
$("#dialog").dialog();
As you can imagine I need to load my content into a particular div so I don't mess up the design of the site the bookmarklet was loaded in.
3.)The dialog that just opened has the content of a remote php file that basically parses the page.
The script is done I just need it to load in thid dialog that I'm trying to construct.
Please help as I am really stuck with this! Thanks.
Does this help? Is this the part that gives you problems?
$("<div id='id'></div>").html("Loading......");
The jQuery docs say:
All HTML must be well-formed, otherwise it may not work correctly across all browsers. This includes the case where
$("<span>")
may not work but$("<span/>")
will (note the XML-style closing slash).
精彩评论