Javascript輸入來自iFrame中文本字段鏈接的數據

Question

下午好。

<iframe width="550" id="iframe1" height="350" scrolling="no" src="blah.com/iframe.html"></iframe> 

<script type="text/javascript"> 
    function insertTxt() { 
     var textstring = ""; 
     parent.iframe1.document.getElementsByTagName("input")[0].value = textstring; 
    } 
</script> 

<a href="#" onclick="insertTxt();">test 1</a> 
<a href="#" onclick="insertTxt();">test 2</a> 
<a href="#" onclick="insertTxt();">test 3</a> 
<a href="#" onclick="insertTxt();">test 4</a> 

它加載在iframe具有1個輸入域，但沒有ID鎖存到頁面上。我一直在尋找解決方案來解決這個問題。我試圖讓文本'測試1'或'測試2'等插入到iframe中的輸入字段。

在iframe文件中，這是輸入字段html。

<input type="text" autocomplete="off" spellcheck="true" maxlength="361" style="width: 100%; padding: 0px; border: 0px; margin: 0px; outline: 0px; background: rgb(255, 255, 255); color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; font-size: 15px;"> 

如果任何人能夠幫助我解決上述問題。

非常感謝。

Answer 1

首先，您將空字符串分配給變量文本字符串，其次，如果您在沒有網絡服務器的情況下執行該操作，它將無法工作（控制檯中會出現錯誤Uncaught DOMException）。

按照以下步驟得到它的工作

1. 使用一個Web服務器
2. 添加name="iframe1"上的iframe
3. HTML - <a href="#" onclick="insertTxt(this);">test 1</a>

4. 更改功能

   function insertTxt(el) { 
       var textstring = el.text; 
       parent.iframe1.document.getElementsByTagName("input")[0].value = textstring; 
   } 
   

Answer 2

您可能需要配置您的服務器才能執行此操作，否則您將收到CORS錯誤。

我在這裏使用了querySelector，但它也應該與elementsByTagName和id一起工作。

iFrame.document未定義，但您可以像這樣獲取iFrame的內容。如果你沒有試圖做到這一點的錯誤，那麼你很好。

var iFrame = document.querySelector('#frame1'), 
    iFrameContent = iframe.contentDocument || iframe.contentWindow.document; 

那麼你應該能夠從那裏查詢輸入。如果您知道文件是不會改變的，並且總是要去看看一樣，你必須明確得到你正在尋找這樣

var n = <the n'th input> 
var input = iFrame.querySelectorAll('input')[n]; 

通過查詢選擇，你可以得到的輸入框更具體一點，抓住唯一的投入，其中類型是文字是這樣的：

var m = <the m'th input where type is text> 
var input = iFrame.querySelectorAll('input[type="text"')[m] 

然後，當你得到你的輸入，更改輸入的值，像這樣：

input.value = "text here"; 

EDIT

如何使用這樣的一個示例：改變輸入字段

function insertTxt(text) { 
    /// get the iFrame and then it's 'document' 
    var iFrame = document.querySelector('#frame1'), 
     iFrameContent = iframe.contentDocument || iframe.contentWindow.document; 
    // get the first input box with type text 
    var input = iFrame.querySelectorAll('input[type="text"')[0] 
    // set the value of the input field to that text 
    input.value = text; 
} 

是容易的。你現在面臨的問題是Cross domain Policy。如果該iFrame的src不在相同的Web域上，則您嘗試使用此腳本，則會出現錯誤。

最新問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 相關問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.