从同一域的iframe中的元素中获取值

Question

I'm trying to condense two processes down in to one by having the two pages I need on one page using an iframe.

I have a page that contains a text area (used for sending an email) and then I have a purchase reference page that contains the details of someones purchase.

I'm trying to append an iframe of the purchase page to the bottom of my email page and then grab some data that's on it and insert it in to the text area.

EDIT : This is what I have so far:

Script one

//Grabs the selected purchase number
var purchaseNumber = window.getSelection();
purchaseNumber = purchaseNumber.toString();

var purchaseTitle;
var purchaseNumber;

function frameLoaded() {
           purchaseTitle = window.frames['purchaseIframe'].contentDocument.getElementById ('listingTitle');
           purchaseNumber = window.frames['purchaseIframe'].contentDocument.getElementById ('auctionSoldIdDisplay');
           purchaseTitle = purchaseTitle.innerHTML;
           purchaseNumber = purchaseNumber.innerHTML

var purchaseDetails = purchaseTitle + " - " + purchaseNumber;

insertText = insertText.replace("PURCHASEDETAILS", purchaseDetails);
         }  

if(purchaseNumber.length > 0){

var purchaseIframe = document.createElement('iframe');
purchaseIframe.src = 'http://www.mysite.co.nz/Admin/Listing/PurchaseDisplay.aspx?asid=' + purchaseNumber + '&submit1=++GO++';
purchaseIframe.setAttribute("height","1000");
purchaseIframe.setAttribute("width","100%");
purchaseIframe.setAttribute("id","purchaseIframe");
purchaseIframe.setAttribute("onload", "frameLoaded();");
void(document.body.appendChild(purchaseIframe));
alert(purchaseNumber); 
}

Script Two

//Gather the selected template
var selectedTxt = document.getElementById('txtEmailText').value;

//Change the selected txt to a string
var insertText = selectedTxt.toString();

var purchaseTitle = window.frames['purchaseIframe'].contentDocument.getElementById ('listingTitle');
var purchaseNumber = window.frames['purchaseIframe'].contentDocument.getElementById ('auctionSoldIdDisplay');

purchaseTitle = purchaseTitle.innerHTML;
purchaseNumber = purchaseNumber.innerHTML

var purchaseDetails = purchaseTitle + " - " + purchaseNumber;

insertText = insertText.replace("PURCHASEDETAILS", purchaseDetails);


//Pasting the variable in to the textarea
document.getElementById('txtEmailText').value = insertText;

Effectively I am highlighting the purchase reference number on the page then executing this script to open the purchase page using the highlighted number. I am then grabbing the text values of the elements I need and pasting them in to the text area.

I'm still pretty new to javascript and am teaching myself as I go.

If i run the above scripts one after the other then it works like a charm, however if I try to run them together with the second in an onload() function set to the iframe then it won't.

Any help would be greatly appreciated or if you could point me in the direction of an article to help.

Answer 1

My first thought is that the iframe is not fully loaded before you try to get the values from it. My thought would be to try adding an onload event to your iframe and then when it loads invoke a function that grabs the value.

I would add purchaseIframe.setAttribute("onload", "frameLoaded();"); to your purchaseIframe block and then add the frameLoaded() function to your script. something like:

      function frameLoaded() {
            var purchaseTitle = window.frames[0].document.getElementById("listingTitle" );
            var purchaseNumber = window.frames[0].document.getElementById("auctionSoldIdDisplay");
            console.log(purchaseTitle.innerHTML);
            console.log(purchaseNumber.innnerHTML);
         }  

And see if something like that grabs the right values. If it does than you can plug it in where you need it.

Am I understanding your problem correctly?