Forum Moderators: open

Message Too Old, No Replies

Need javascript to modify page when it loads

how to modify data on load

         

Klem Kadiddlehopper

2:31 am on Jan 9, 2009 (gmt 0)

10+ Year Member



I am new to javascript so my question may have an easy answer for someone with experience.

I have some js that builds a list of links and writes the list into a paragraph in a frame. For example:

function buildLinks()
{
...
aLink = '<a href="' + 'C:/x.htm' + '" class="c" target="'+tgt_frame + '" onClick=editPage() >' + title +'</a><br/>\n';

...
}

function editPage()
{
// Here's the question.
}

I can't figure how to refer to the information in the page that clicking on the generated link loads so I can process its contents. I have found lots of web sites that nearly answer my question but none has panned out so far.

I know that editPage() is being called when I click the link because it can bring up an alert box for example. It may be that I need to invoke onload()instead of onClick() but I haven't been able to figure that out either.

I would appreciate any help.

daveVk

5:53 am on Jan 9, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I don't understand question.

You have initial page/window (w1) and second iframe/window containing a number of generate links (w2). You also have a function editPage defined within w1 I assume.

The link within w2 refers to editPage, but there is no editPage within w2 or is there ?

If you wish to refer to something not in same window you need to qualify it, say w1.editPage() where w1 has been set up prior.

Klem Kadiddlehopper

6:12 pm on Jan 9, 2009 (gmt 0)

10+ Year Member



What I'm trying to understand is how to associate the function editPage() with the contents of the page referenced by the href. When I click the link, editPage() is called as desired but I don't know how to get it to refer to the page's contents.

Here is a cleaner example of a link:
aLink = <a href="C:/x.htm" class="c" target="tgt_frame" onClick=editPage()> title </a>;

As I said, I'm new to this so I may not be asking the right questions. Also, I inherited the code, I didn't originate it. Please be tolerant as I climb the learning curve. My goal is to load the selected page and edit its contents, probably before it is displayed.

Thanks again.

methode

8:14 pm on Jan 9, 2009 (gmt 0)

10+ Year Member



Welcome to the forums. I'm new too but guessed you'd like a warm welcome.

Other than we don't understand what you ask, there's nothing wrong with your question. So we shoot in the air our theories, like a hunter whos gun barrel has a 180 degree curve, pointing to his own head.

My theory is that you want some AJAX fancy nancy loading, but with frames? Like, you click link in FRAME1 and the content loads in FRAME2. If that's what you want, you don't need JS?!

Can you show us some pages where you found those almost good answers? Maybe we'd understand too what you mean.

daveVk

1:44 am on Jan 12, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



To clarify, is this the sequence you have in mind.

- click on link
- content of C:/x.htm goes to IFrame
- javascript then needed to change/edit Iframe content ( not main page content ) ?

If so, remove onClick=editPage() and as you suggest add onload() within C:/x.htm.

Am I on track ?

Klem Kadiddlehopper

6:00 pm on Jan 12, 2009 (gmt 0)

10+ Year Member



Yes, you got it.

Is it necessary to put the javascript into x.htm? There are going to be thousands of such files and it would be better for me if I could have the code in one place. That's why I had put the onClick clause in the link. If that's just not doable then I'll have to bite the bullet and modify all of the target files.

Thanks again.

jpope

7:16 pm on Jan 12, 2009 (gmt 0)

10+ Year Member



I believe this answers your question:

<!-- StartingPage.html -->
<html>
<head>
<script type="text/javascript" language="JavaScript">
function editPage() {
alert(window.frames["tgt_frame"].document.getElementById("Div2").innerHTML);

}
</script>
</head>
<body>
<!-- You use javascript buildLinks() to effectively create the following p-->
<p>
<a href="x.html" class="c" target="tgt_frame" onClick="editPage()">Page 1</a><br/>
<a href="x2.html" class="c" target="tgt_frame" onClick="editPage()">Page 2</a><br/>
<a href="x3.html" class="c" target="tgt_frame" onClick="editPage()">Page 3</a><br/>
</p>

<iframe src="" height="150px" name="tgt_frame"></iframe>
</body>
</html>

<!-- x.html -->
<html>
<head></head>
<body>
<div id="Div1">I have text</div>
<div id="Div2">I have different text</div>
</body>
</html>

jpope

7:21 pm on Jan 12, 2009 (gmt 0)

10+ Year Member



To expand upon that, repeatedly typing 'window.frames["tgt_frame"].document' makes the code harder to read. Ideally, you'll most likely want to change the script block above to look more like the following. (I did not use it above to try to make things as simple to understand as possible.)

<script type="text/javascript" language="JavaScript">
var innerDoc = window.frames["tgt_frame"].document;

function editPage() {
alert(innerDoc.getElementById("Div2").innerHTML);
alert(innerDoc.getElementById("Div1").innerHTML);

}
</script>

daveVk

11:38 pm on Jan 12, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



See [dyn-web.com...] for details of using iframes.

Putting the js in x.html is the most direct way. The alternative is to code the iframe ( May not work with older browsers )

<iframe ... onload="editPage(this)" >

As editPage is run in context of main page, references to say document.getElementById will refer to main page, to refer to iframe content you need to use window.frames["tgt_frame"].document as jpope points out. So editPage could look like

function editPage( frameEl ) {
var d = window.frames["tgt_frame"].document; // or frameEl.document
alert( d.getElementById(...).innerHTML );
}

This will only work if main page and iframe content come from same domain.