Как значения из iframe отправить в элемент div? - PullRequest
Новая
       10

Как значения из iframe отправить в элемент div?

0 голосов
/ 26 января 2020

Сегодня я сделал свой текстовый редактор в iframe. Я знаю, что значения из iframe не отправляются в базу данных. Моя первая идея заключается в отправке значений из iframe в div, и что div данные отправляются в базу данных с соответствующими текстовыми форматами. 

function wlaczTrybEdycji(){
    edytorTextowy.document.designMode = "On";
}
function execCmd(command){
    edytorTextowy.document.execCommand(command, false, null);
}
function przeniesDane(){
    var ramka = document.getElementById("ramka");
    var dodiv = document.getElementById("daneIframe");
    dodiv == ramka;
}
.textarea2{
    width: 700px;
    float: left;
    height: 240px;
    border: 2px solid black;
    clear: both;
    padding: 5px;

}
<body onload="wlaczTrybEdycji();">
  <form action="" method="post">
    <div class="EdytorTextowy">
        <div class="przyciskiTextEdytor">
            <button onclick="execCmd('bold');">BOLD</button>
        </div>     
        <iframe name="edytorTextowy" class="textarea2" id="ramka"></iframe>
          <div id="daneIframe">
          
          </div>
        <button type="submit" name="wyslijText">WYSLIJ</button><!-- here send from "daneIframe" to DB (PHP)-->
    </div>
  </form>
</body>

Ответы [ 2 ]

0 голосов
/ 26 января 2020

Хм, теперь я понимаю! Вы можете получить элементы с ajax или javascript, например, так:

JavaScript для примера

Отображенный здесь JavaScript является просто примером для покажите, как получить доступ к элементам iframe. 

// attach handlers once iframe is loaded
document.getElementById('ifrm').onload = function() {

    // get reference to form to attach button onclick handlers
    var form = document.getElementById('demoForm');

    // set height of iframe and display value
    form.elements.button1.onclick = function() {
        var ifrm = document.getElementById('ifrm');
        var ht = ifrm.style.height = '160px';
        this.form.elements.display.value = 'The iframe\'s height is: ' + ht;
    }

    // increment and display counter variable contained in iframed document
    form.elements['button2'].onclick = function() {
        // get reference to iframe window
        var win = document.getElementById('ifrm').contentWindow;
        var counter = ++win.counter; //  increment
        this.form.elements['display'].value = 'counter in iframe is: ' + counter;
    }

    // reference form element in iframed document
    form.elements.button3.onclick = function() {
        var re = /[^-a-zA-Z!,'?\s]/g; // to filter out unwanted characters
        var ifrm = document.getElementById('ifrm');
        // reference to document in iframe
        var doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;
        // get reference to greeting text box in iframed document
        var fld = doc.forms['iframeDemoForm'].elements['greeting'];
        var val = fld.value.replace(re, '');
        // display value in text box
        this.form.elements.display.value = 'The greeting is: ' + val;
    }

    form.elements.button4.onclick = function() {
        // get reference to iframe window
        var win = document.getElementById('ifrm').contentWindow;
        win.clearGreeting(); // call function in iframed document
    }
}

Или вы можете сделать что-то подобное в jquery: 

    var content=$("iframe").contents().find('body').html();
   //alert elements in iframe or show elements as a response in and div                                                             
    alert(content);
0 голосов
/ 26 января 2020

Важно понимать, что вы делаете, в браузере есть правила о кросс-документе.

Странице внутри iframe запрещено получить доступ или изменить DOM своего родителя и наоборот, если оба не имеют одинаковое origin . Итак, говоря по-другому: документ или скрипт, загруженный из одного источника, не могут получить или установить свойства документа из другого источника .

Вот документы в политике одного и того же происхождения из MDN.

Если iframe и страница, на которой он загружен, имеют одинаковое происхождение, вы должны делать то, что вы пытаетесь делать, просто отлично. Если нет, то для этого необходимо предоставить эти документы в том же месте происхождения.

...