1

My idea is that, if I click a link on Page 1, it will load Page 2 (same window) and activate a script on Page 2. All of this done by through the same link.

More specifically, the page I'm making will have a link to an article on Page 2, and on Page 2 the article is hidden but will be expanded using JavaScript (like a "Read More" function you might see in some blogs). Page 1 would have a link that leads straight to the article and expands it at the same time.

Thanks for the help.

edit 1: Sorry, I may not have clarified completely. Basically, the Page 2 would have multiple articles on it. From Page 1 I intend to have different links to activate different articles on Page 2 (also articles on other pages from different links, but I just need to get at least one working first).

Snail489
  • 13
  • 3

3 Answers3

1

Just set an onload on page 2, to trigger whatever javascript you like. It's hard to trigger a js function on a page that doesn't yet exist.

<body onload="expandArticle()">

If you want to send parameters to page2 (like article id to expand), there are several options to do so. For example, set it in the page url:

<a href="/articles.html?articleid=7">Read article</a>

and then pick that request parameter in your javascript at articles page (page 2).

function expandArticle() {
   var url = window.location.href,
       articleId = url.split("?")[1].split("=")[1];

   console.log("articleId = " + articleId);
   // do something with article
}

(This isn't the most fancy way of extracting request parameters, and it depends on the parameter structure. But for a simple example like this it works though. Using regular expressions are probably the best way of doing it, like here: How can I get query string values in JavaScript?)

Community
  • 1
  • 1
stafffan
  • 482
  • 6
  • 17
  • Sorry, I may not have clarified completely. Basically, the Page 2 would have multiple articles on it. From Page 1 I intend to have different links to activate different articles on Page 2 (also articles on other pages from different links, but I just need to get at least one working first). – Snail489 Oct 01 '13 at 07:15
  • All right, sure thing. How about now then? I edited my answer. – stafffan Oct 01 '13 at 07:24
  • Still a bit confused. In the "//do something with article" should I replace it with the script I used previously (it made the rest of the article visible through style.display block and the "Read More" line invisible through style.display none)? I see that the articleId is given a number through the URL, but then how would I make it recognize that it is related to the article on the page? – Snail489 Oct 01 '13 at 07:57
  • Well, I haven't seen your javascript, so it's hard for me to tell exactly how to adapt it. But essentially, yes you should. You can use the articleId variable to pick out the current article div to show, and also the correct "read more" line to hide. – stafffan Oct 01 '13 at 08:04
0

In page1 have a simple link that redirects to Page2 and in the page2 use Jquery document.ready function to call the javacript functions according to your need.

Amit
  • 2,495
  • 14
  • 22
  • 1
    Really no need to use jQuery for such a simple task. He doesn't mention jQuery anywhere in the question, right? – stafffan Oct 01 '13 at 07:08
  • Yeah, But using some standard library tasks become simple. There are plenty of stuffs available that he can use. – Amit Oct 01 '13 at 07:09
  • Sure thing, jQuery IS a truly a great library. But unless you won't use its more powerful features it only bloats your webpage, making it slower to load. The OP really should learn to use vanilla JS before learning jQuery. – stafffan Oct 01 '13 at 07:14
0

I suggest you using the fragment identifier part of the URL to decide which content to show on load.

Suppose your second page is example.com/foo

In you first page you set the href of link tag to something like :

<a href="/foo#bar">My Link</a>

And you modify you second so that your onDocumentReady listener looks like 

function onLoad()  {
    switch (document.location.hash) {
    case "bar": showContentForBar(); break;
    case ....
    }
}

Using the fragment part of the url ensures that the server won't be affected (the browser won't send the fragment part). Historically, the fragment was used for anchor links, and can be still used today to achieve the same "state save" functionality.

Note that prior the HTML5 History API, this was the widespread technique (a more elaborated version though) to implement single page webapps.

Hope this will help.

sitifensys
  • 2,024
  • 16
  • 29
  • Thanks, managed to get it to work. It looks like the location.hash function returns the anchor part WITH the # at the start of it, so I had to change the case part. – Snail489 Oct 01 '13 at 08:13