1. 首頁
  2. 問答
  3. 在iframe中使用替換方法的Javascript

在iframe中使用替換方法的Javascript

2016-01-05 22 views
8

我想知道是否有可能替換iframe中的突然單詞。在iframe中使用替換方法的Javascript

我已經使用jQuery更改iframe內的內容，但使用相同的內容替換。這裏的問題是'遊標重置'到輸入字段的開頭，所以你必須從頭開始再次寫入。

因此，這裏是我做過什麼

<html> 
<head> 
<script> 
function iFrameOn(){ 
    richTextField.document.designMode = 'On'; 
} 

</script> 
</head> 
<body onLoad="iFrameOn();"> 

<!-- Hide(but keep)your normal textarea and place in the iFrame replacement for it --> 
<textarea style="display:none;" name="myTextArea" id="myTextArea" cols="100" rows="14"></textarea> 
<iframe name="richTextField" id="richTextField" style="border:#000000 1px solid; width:100px; height:20px;"> 
</iframe> 
<!--End replacing your normal textarea --> 
</p> 
<script> 
     function ReplaceWords(){ 
      var textfield = document.getElementById("richTextField"); 

      textfield.contentWindow.document.body.onkeyup = function(e){ 
       var content = textfield.contentWindow.document.body.innerHTML; 
       var Fixed_Content = content.replace("hey", "yo"); 
       $(document).ready(function() { 
        $('#richTextField').contents().find('body').html(Fixed_Content); 
       }); 
      }; 
     }; 
     ReplaceWords(); 
</script> 

</body> 
</html>

的問題是：如果你能代替部分的iframe裏面的內容無光標復位，因爲當你鍵入它沒有意識到，它只是從開始啓動再次。

更新：基本上它不是textarea焦點，它隱藏在iframe中，因此我使用document.designMode = 'On';。

我已經更新了這篇文章，這是它應該從一開始。

按要求鏈接的jsfiddle： https://jsfiddle.net/tqf3v2sk/8/

來源

2016-01-05 Frederik

+0

您有一個額外的'，'。你在定義它之前調用'Hello（）'。您可以使用'onmouseenter'事件或設置間隔來執行此操作。展示一個例子會很棒。 –

+0

謝謝，但在mouseenter上寫作時，它不是實時的。 – Frederik

+0

如果我在iframe中瞭解了你的權限，則可以加載輸入字段，並且當用戶鍵入時嘗試替換輸入文本的某些部分。如果是的話，那麼你可以用更新後的輸入字段值來代替html標籤。因爲整個文件更換的原因所描述的問題。否則，如果標籤替換正是您所需要的，您可以在內容更改後在輸入字段上調用焦點方法。 –

回答

2

在同一個域中的iFrame工作是不是從與DOM元素的工作很大的不同。您只需確保您使用的方法在適當的窗口和文檔對象上被調用。但是，如果您正確定位了窗口和文檔，則可以使用幾乎相同的方式從父窗口調用它們，就好像它與腳本位於同一窗口中一樣。

至於輸入時的替換，有幾種方法。一種方法是使用document.execCommand（'insertText'）和選擇。您檢測輸入的密鑰是否與要替換的單詞的最後一個字符匹配，如果是，則選擇要替換的單詞的長度並檢查它是否匹配。如果匹配，則調用execCommand，它將替換它，並在更換結束時留下光標。

function replaceOnKeyDown(e, toReplace, replaceWith) { 

    var iptFld = e.target; 
    var lastLetter = toReplace[toReplace.length - 1]; 
    var keyEntered = String.fromCharCode(e.keyCode); 
    console.log(keyEntered) 
    // To make it more efficient, you can call the rest only if the 
    // key just pressed is the same as the last of the word you 
    // need to replace. 
    if (lastLetter.toLowerCase() === keyEntered.toLowerCase()) { 
    // Set selection to your word length 
    var range = frameWindow.getSelection().getRangeAt(0); 
    var caretPosition = range.startOffset; 
    // Since you're on key down, the caret position is before the 
    // last letter is entered. 
    var toReplaceStart = caretPosition - toReplace.length + 1; 

    range.setEnd(range.startContainer, caretPosition); 
    range.setStart(range.startContainer, toReplaceStart); 
    frameWindow.getSelection().addRange(range); 
    // Check if the selection matches the word to replace 
    // Since you're on mouse down, the range will only include 
    // up until the letter being entered. So you need to validate 
    // that the word without the last letter equals 
    // the selection. 
    if (range.toString() + lastLetter === toReplace) { 

     frameDocument.execCommand('insertText', false, replaceWith); 
     // prevent last letter to be entered 
     e.preventDefault(); 

    } else { 

     frameWindow.getSelection().collapse(range.startContainer, caretPosition); 

    } 
    } 
} 

var textfield = document.getElementById("richTextField"); 
var frameWindow = textfield.contentWindow 
var frameDocument = frameWindow.document 
frameDocument.designMode = 'on' 
frameDocument.body.onkeydown = function(e) { 
    replaceOnKeyDown(e, 'hey', 'yo') 
};

https://jsfiddle.net/k0qpmmw1/6/

來源

2016-01-10 17:04:12

+1

你好，對於遲到的回覆感到抱歉，但是這代替了已經隱藏的