javascript - 将 iframe 值传输到文本区域

Question

我正在制作一个提交帖子的应用程序，但我最初设计它时考虑了文本区域，此后我放入了一个 iframe 来创建一个富文本字段，将文本区域的显示样式设置为隐藏并想要了解如何修改它以使用 iframe 值。

HTML

<div id="textWrap">
      <div class="border">
        <h1>Start Writing</h1><br />
        <input id="title" placeholder="Title (Optional)">

        <div id="editBtns">
          <button onClick="iBold()">B</button>
          <button onClick="iUnderline()">U</button>
          <button onClick="iItalic()">I</button>
          <button onClick="iHorizontalRule()">HR</button>
          <button onClick="iLink()">Link</button>
          <button onClick="iUnLink()">Unlink</button>
          <button onClick="iImage()">Image</button>
        </div>

        <textarea id="entry" name="entry" rows="4" cols="50" type="text"  maxlength="500" placeholder="Add stuff..."></textarea>
        <iframe name="richTextField" id="richTextField"></iframe><br />
        <button id="add">Submit</button>
        <button id="removeAll" onclick="checkRemoval()">Delete All Entries</button>
        <ul id="list"></ul>
        <ul id="titleHead"></ul>
      </div><!--end of border div-->
    </div><!--end of textWrap-->

这是提交帖子的JS。

//target all necessary HTML elements
var ul = document.getElementById('list'),
    removeAll = document.getElementById('removeAll'),
    add = document.getElementById('add');
    //richText = document.getElementById('richTextField').value;

//make something happen when clicking on 'submit'
add.onclick = function(){
  addLi(ul)
};

//function for adding items
function addLi(targetUl){
  var inputText = document.getElementById('entry').value, //grab input text (the new entry)
      header = document.getElementById('title').value, //grab title text
      li = document.createElement('li'), //create new entry/li inside ul
      content = document.createElement('div'),
      title = document.createElement('div'),

      //textNode = document.createTextNode(inputText + ''), //create new text node and give it the 'entry' text

      removeButton = document.createElement('button'); //create button to remove entries

  content.setAttribute('class','content')
  title.setAttribute('class','title')
  content.innerHTML = inputText;
  title.innerHTML = header;

  if (inputText.split(' ').join(' ').length === 0) {
    //check for empty inputs
    alert ('No input');
    return false;
  }


  removeButton.className = 'removeMe'; //add class to button for CSS
  removeButton.innerHTML = 'Delete'; //add text to the remove button
  removeButton.setAttribute('onclick', 'removeMe(this);'); //creates onclick event that triggers when entry is clicked

  li.appendChild(title); //add title textnode to created li
  li.appendChild(content); //add content textnode to created li
  li.appendChild(removeButton); //add Remove button to created li

  targetUl.appendChild(li); //add constructed li to the ul
}

//function to remove entries
function removeMe(item){
  var deleteConfirm = confirm('Are you sure you want to delete this entry?');
  if (deleteConfirm){var parent = item.parentElement;
  parent.parentElement.removeChild(parent)}
};

function checkRemoval(){
  var entryConfirm = confirm('Are you sure you want to delete all entries?');
  if (entryConfirm){
    ul.innerHTML = '';
  }
};

演示我正在做以供引用.. http://codepen.io/Zancrash/pen/VemMxz

Answer 1

您可以使用任一本地存储将 iframe 值传递给父 DOM。

或(使用它来将值从 iframe 传递到父容器)

var iFrameValue = $('#iframe').get(0).contentWindow.myLocalFunction();
var iFrameValue = $('#iframe').get(0).contentWindow.myLocalVariable;

来自 IFrame html

<script type="text/javascript">

var myLocalVariable = "text";

function myLocalFunction () {
    return "text";
}

</script>