>Форум Mozilla Россия http://forum.mozilla-russia.org/index.php >Разработка http://forum.mozilla-russia.org/viewforum.php?id=18 >iframe + designMode, динамическая загрузка CSS http://forum.mozilla-russia.org/viewtopic.php?id=18534 |
lycan > 14-08-2007 17:16:06 |
Пытаюсь динамический загрузить CSS, для iframe Выделить код Код:var jsEditorBaseUrl = false; var elements = document.getElementsByTagName("script"); for (var i = 0; i < elements.length; i++) { if (elements[i].src && (elements[i].src.indexOf("jseditor.js") != -1)) { var src = elements[i].src; jsEditorBaseUrl = src.substring(0, src.lastIndexOf('/')); break; } } var jsEditorPathCSS = jsEditorBaseUrl + "/css/"; var jsEditorPathImg = jsEditorBaseUrl + "/img/"; // функция для загрузки function importCSSToDoc(doc, cssFileName) { var styleSheet = doc.createElement("link"); styleSheet.setAttribute("href", jsEditorPathCSS + cssFileName); styleSheet.setAttribute("rel", "stylesheet"); styleSheet.setAttribute("type", "text/css"); var head = doc.getElementsByTagName("head"); head[0].appendChild(styleSheet); } Function.prototype.bind = function(object) { var method = this return function() { return method.apply(object, arguments) } } // загружаем для этого документа importCSSToDoc(document, "jseditor.css"); function actionEvent(instance, action) { this.instance = instance; this.action = action; } function jsEditor(name, content) { this.name = name; this.content = content; } jsEditor.prototype = { executeAction : function(action) { alert("instance : " + this.name + ", action : " + action); }, createToolbarFromArray : function(toolbarCell, arrayToolbar) { var instanceName = this.name; for (i in arrayToolbar) { var image = document.createElement("img"); image.setAttribute("src", jsEditorPathImg + arrayToolbar[i][2]); image.setAttribute("class", "jseditor-button"); image.onclick = function() { this.instance.executeAction(this.action); }.bind(new actionEvent(this, arrayToolbar[i][1])); image.onmouseover = function() { this.id = "js-button-selected"; } image.onmouseout = function() { this.id = ""; } toolbarCell.appendChild(image); } }, createSeparator : function(toolbarCell) { var image = document.createElement("img"); image.setAttribute("src", jsEditorPathImg + "separator.png"); image.setAttribute("class", "jseditor-separator"); toolbarCell.appendChild(image); }, createToolbar : function(toolbarCell) { var arrayFontStyleToolbar = [ ['Калын', 'Bold', 'bold.png'], ['Курсив', 'Italic', 'italic.png'], ['Подчеркнытый', 'Underline', 'underline.png'], ['Перечеркнутый', 'StrikeThrough', 'strikethrough.png'] ]; var arrayAdditionalToolbar = [ ['Рәсем куярга', 'InsertImage', 'insertimage.png'] ]; if (this.enableFontStyleToolbat) { this.createToolbarFromArray(toolbarCell, arrayFontStyleToolbar); } if (this.enableAdditionToolbar) { this.createSeparator(toolbarCell); this.createToolbarFromArray(toolbarCell, arrayAdditionalToolbar); } return toolbarCell; }, getDoc : function() { return this.iFrame.contentDocument; }, createIFrame : function() { this.iFrame = document.createElement("iframe"); this.iFrame.setAttribute("class", "jseditor-iframe"); this.iFrame.onload = function() { // загружаем для ifamre importCSSToDoc(this.contentDocument, "jseditor-iframe.css"); this.contentDocument.designMode = 'on'; } return this.iFrame; }, create : function() { var table = document.createElement("table"); table.setAttribute("class", "jseditor-conteiner"); table.setAttribute("cellpadding", "0"); table.setAttribute("cellspacing", "0"); var toolbarRow = table.insertRow(0); var iFrameRow = table.insertRow(1); var toolbarCell = toolbarRow.insertCell(0); toolbarCell.setAttribute("id", "toolbar-cell"); this.createToolbar(toolbarCell); var iFrameCell = iFrameRow.insertCell(0); iFrameCell.setAttribute("id", "iframe-cell"); iFrameCell.appendChild(this.createIFrame()); document.body.insertBefore(table, null); } } FireBug показывает, что <link /> подключен к iframe, но стили не применяются, но при этом стили относящиеся к главной странице действуют. Даже незняю в какую сторону смотреть, помогите пожалуйста! |
Dark-Demon > 14-08-2007 22:33:38 |
а консоль ошибок что показывает? а вообще, это точно необходимо css грузить динамически? |
Shutnik > 15-08-2007 08:05:04 |
по моему у вас опять проблема в this: Выделить код Код:// загружаем для ifamre importCSSToDoc(this.contentDocument, "jseditor-iframe.css"); p.s.: старайтесь приводить коды меньших размеров |
lycan > 15-08-2007 14:21:56 |
в данном случае все правильно, этот "тот самый" this Динамичаски загружать необходимо потому что CSS файл может находится в разных каталогах. Проблему решил: указал для iframe аттрибут src на пустоу HTML файл, и потом добавил CSS динамичаский. PS:
будем приводить поменьше(в следующий раз) Спасибо за помощь!!! |
Dark-Demon > 16-08-2007 08:04:43 |
я делаю проще... Выделить код Код:var edoc= frame.contentDocument || frame.contentWindow; if (edoc.document) edoc= edoc.document; edoc.open(); edoc.write('<html><head><style>'+styles+'</style><script src="editor.js"></script></head><body>'+html+'</body></html>'); edoc.close(); |
lycan > 17-08-2007 09:52:50 |
Dark-Demon |