Блог

Главная - Вопросы по программированию - Как обновить div в htmleditor

Как обновить div в htmleditor

#javascript #forms #extjs #extjs4

#javascript #формы #extjs #extjs4

Вопрос:

Может ли кто-нибудь помочь мне в обновлении div в htmleditor? Это в iframe, поэтому я не мог сделать:

 Ext.fly('mydiv').update('New value');

Прямо сейчас я обновляю весь контент с помощью:

 xtype:'textfield',
listeners:{
                keyup:{
                    fn:function(){
                        var e = this.up().down('htmleditor');
                        var v = 'some text <div id='mydiv'></div> some more text'
                        e.setValue(v);
                    }
                }
            },
xtype:'htmleditor',
...

где, поскольку я хотел бы обновить только часть mydiv, но не могу каким-то образом получить ссылку на нее. Спасибо.

Комментарии:

1. Нам нужно увидеть ваш код. Рассмотрите возможность публикации примера или тестового примера с использованием JS Fiddle: jsfiddle.net

2. Привет! jsfiddle. к сожалению, net имеет только Ext core, поэтому я не могу показать пример там.

3. Что ж, тогда опубликуйте пример где-нибудь еще. Здесь недостаточно информации, чтобы действительно диагностировать проблему.

4. По сути, я пытаюсь сделать вот что: у меня есть форма с текстовым полем и htmleditor в качестве элементов в ней. В редакторе есть предварительно загруженный довольно форматированный HTML с DIV, куда я хочу поместить номер счета, введя его в текстовое поле выше. Обычно я могу обновить значение DIV с помощью el.update(), но в этом случае htmleditor находится в IFRAME. Моим временным решением является обновление всего значения htmleditor при каждом событии keyup, но оно обходится дорого вместо простого обновления небольшого DIV, но, к сожалению, я не могу его получить. Любая помощь приветствуется.

Ответ №1:

Если я правильно понимаю, реальный вопрос здесь заключается в том, «Как мне получить доступ к DIV внутри IFRAME из его родительского документа?»

Я ни для чего не использовал EXT JS, поэтому я не знаю его синтаксис. Но здесь это на базовом JavaScript.

Во-первых, документ в IFRAME:

 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Child Document</title>
</head>
<body>

<h1>Child Document</h1>

<div id="stuff">
This is a div with some text in it.
</div>

</body>
</html>

А затем родительский документ:

 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Parent Document</title>
    <style type="text/css">
     #iframe {
        width: 250px;
        height: 250px;
        border: 1px solid #CCC;
    }
    </style>
</head>
<body>

<h1>Parent Docment</h1>

<form action="" method="get">
    <p>
    <input type="button" id="get-it" value="Get It" />
    </p>
</form>

<iframe src="iframe.html" id="iframe"> </iframe>

<script type="text/javascript">
<!--
function getIt(){
    var iframe = document.getElementById("iframe");
    var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
    var stuff = innerDoc.getElementById("stuff");
    alert(stuff.innerHTML);
}

function init(){
    document.getElementById("get-it").onclick = getIt;
}

window.onload = init;

// -->
</script>

</body>
</html>

Ключ в этом:

 var innerDoc = iframe.contentDocument || iframe.contentWindow.document;

Это позволяет вам получить доступ к объекту document IFRAME, после чего вы можете использовать его в обычном режиме.