CODEWITHSUNDEEP
javascriptdom
sonofdelphi
sonofdelphi

Reputation: 2036

Collect DOM elements from external HTML documents

I am trying to write a report-generator to collect user-comments from a list of external HTML files. User-comments are wrapped in < span> elements.

Can this be done using JavaScript?

Here's my attempt:

function generateCommentReport()
{
    var files = document.querySelectorAll('td a'); //Files to scan are links in an HTML table
    var outputWindow = window.open(); //Output browser window for report

    for(var i = 0; i<files.length; i++){
        //Open each file in a browser window
        win = window.open();
        win.location.href = files[i].href;

        //Scan opened window for 'comment's
        comments = win.document.querySelectorAll('.comment');
        for(var j=0;j<comments.length;j++){
            //Add to output report
            outputWindow.document.write(comment[i].innerHTML);
        }
    }
}

Upvotes: 0

Views: 493

Answers (3)

sonofdelphi
sonofdelphi

Reputation: 2036

I think I have the solution to this.

var windows = [];
var report = null;

function handlerFunctionFactory(i,max){
    return function (evt){
        //Scan opened window for 'comment's
        var comments = windows[i].document.querySelectorAll('.comment');

        for(var j=0;j<comments.length;j++){
            //Add to output report
            report.document.write(comments[j].innerHTML);
        }
        if((i+1)==max){
            report.document.write("</div></body></html>");
            report.document.close();
        }
        windows[i].close();
    }
}

function generateReport()
{
    var files = document.querySelectorAll('td a'); //The list of files to scan is stored as links in an HTML table
    report = window.open(); //Output browser window for report

    report.title = 'Comment Report';
    report.document.open();
    report.document.write('<!DOCTYPE html PUBLIC"-// W3C//DTD XHTML 1.0 Transitional//EN"" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">'
        + '<html><head><title>Comment Report</title>'
        + '</head><body>');

    for(var i = 0; i<files.length; i++){
        //Open each file in a browser window
        win = window.open();
        windows.push(win)
        win.location.href = files[i].href;
        win.onload = handlerFunctionFactory(i,files.length);
    }
}
  1. Any refactoring tips are welcome. I am not entirely convinced that factory is the best way to bind the onload handlers to an instance for example.
  2. This works only on Firefox :(

Upvotes: 0

bobince
bobince

Reputation: 536597

You will need to wait for onload on the target window before you can read content from its document.

Also what type of element is comment? In general you can't put a name on just any element. Whilst unknown attributes like a misplaced name may be ignored, you can't guarantee that browsers will take account of them for getElementsByName. (In reality, most browsers do, but IE doesn't.) A class might be a better bet?

Upvotes: 1

Ifi
Ifi

Reputation: 540

Each web browse works in a defined and controlled work space on a user computer where certain things are restrict to code like file system - these are safety standards to ensure that no malicious code from internet runs into your system to phishing sensitive information stored on in it. Only ways a webbrowser is allowed if access granted explicitly by the user. 

But i can suggest you for Internet Application as

  - If List of commands is static then cache either by XML, Json or Cookies [it will store on user's system until it expires]
  - If dynamic then Ajax to retrieve it

Upvotes: 0

Related Questions