1. घर
  2. सवाल और जवाब
  3. एक आईफ्रेम

एक आईफ्रेम

2016-01-05 102 views
8

के अंदर प्रतिस्थापन विधि का उपयोग कर जावास्क्रिप्ट मुझे आश्चर्य है कि iframe के अंदर अचानक शब्दों को प्रतिस्थापित करना संभव है या नहीं।एक आईफ्रेम

मैंने उसी सामग्री के साथ iframe के अंदर सामग्री को बदलने के लिए 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 के अंदर छिपा हुआ है इसलिए मैं document.designMode = 'On'; का उपयोग करता हूं।

मैंने पोस्ट को फिर से अपडेट किया है, इस तरह यह शुरुआत से ही होना चाहिए था।

का अनुरोध लिंक के रूप में jsfiddle रहे हैं: https://jsfiddle.net/tqf3v2sk/8/

स्रोत

2016-01-05 Frederik

+0

आप एक अतिरिक्त 'है,'। आप इसे परिभाषित करने के आगे 'हैलो()' कहते हैं। आप या तो 'onmouseenter' ईवेंट का उपयोग कर सकते हैं या ऐसा करने के लिए अंतराल सेट कर सकते हैं। एक उदाहरण दिखा रहा है महान होगा। –

+0

धन्यवाद, लेकिन माउसेंटर पर यह लिखते समय रीयलटाइम नहीं होगा। – Frederik

+0

यदि मैं आपको आईफ़्रेम में सही समझता हूं तो आप इनपुट फ़ील्ड लोड करते हैं और जब उपयोगकर्ता प्रकार आप दर्ज टेक्स्ट के कुछ हिस्सों को प्रतिस्थापित करने का प्रयास करते हैं। यदि हां, तो आप केवल इनपुट फ़ील्ड मान को अद्यतन के साथ प्रतिस्थापित कर सकते हैं और न ही HTML टैग को प्रतिस्थापित कर सकते हैं। क्योंकि वर्णित मुद्दे के पूरे दस्तावेज़ प्रतिस्थापन कारण। अन्यथा यदि टैग प्रतिस्थापन बिल्कुल वही है जो आपको चाहिए, तो आप सामग्री परिवर्तन के बाद इनपुट फ़ील्ड पर फ़ोकस विधि को कॉल कर सकते हैं। –

उत्तर

2

एक ही डोमेन iFrames के साथ कार्य करना डोम तत्वों के साथ काम करने से बहुत अलग नहीं है। आपको बस यह सुनिश्चित करना होगा कि आपके द्वारा उपयोग की जाने वाली विधियों को उचित विंडो और दस्तावेज़ ऑब्जेक्ट पर कॉल किया गया है। लेकिन एक बार जब आप सही ढंग से विंडो और दस्तावेज़ पर लक्षित करते हैं, तो आप उन्हें मूल विंडो से बहुत अधिक कॉल कर सकते हैं जैसे कि यह आपकी स्क्रिप्ट के समान विंडो में था।

आपके द्वारा टाइप किए जाने पर प्रतिस्थापन के लिए, इसके कुछ तरीके हैं। एक तरीका दस्तावेज़.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

हैलो, देर से प्रतिक्रिया के लिए खेद है, लेकिन यह