piterskiy
piterskiy

Reputation: 177

How to open different contents in the same pop up window

What is the best way to display different content in the same pop up window.

I'm doing the following:

    <a href = "javascript:openWin('content1.htm')">Content 1</a>
    <a href = "javascript:openWin('content2.htm')">Content 2</a>
    <a href = "javascript:openWin('content3.htm')">Content 3</a>

And I have the following javascript:

       function openWin(url) {
        window.open(url, "_blank", "toolbar=no, scrollbars=no, resizable=no, top=200, left=300, width=870, height=650");
    }

Now, after clicking each link, different pop ups opened. How can I target the same pop up window to display appropriate content, so I have only one pop up opened after clicking second or third link?

Thank you

Upvotes: 1

Views: 5613

Answers (2)

romehu2
romehu2

Reputation: 35

A tad late, but I think using the 'location' property will do what you want:

var windowName;  // global
function openWin(url) {
   if (windowName) {
      windowName.location = url;
      return;
   }
   else {
      windowName = window.open(url, "window_name", "<feature_list>");
   }
}

I was researching this topic because my users want to have an app open on two different windows on different monitors, each window/monitor dedicated to different content within the app itself. The above code opens up new content in the same window, but there's no "flash" or "pop" that tells the user new content has appeared. CSS could certainly be used for this, but compare how the above code executes compared to this code:

var windowName;  // global
function openWin(url) {
   if (windowName) {
      windowName.close();
   }
   windowName = window.open(url, "window_name", "<feature_list>");
}

I think I like the latter UX better.

Upvotes: 0

Polyana Fontes
Polyana Fontes

Reputation: 3212

Really easy, you are creating new popup windows because you are specifying "_blank" as argument, change it to a name and you'll open in the same window as long it's open.

   function openWin(url) {
    window.open(url, "samewindow", "toolbar=no, scrollbars=no, resizable=no, top=200, left=300, width=870, height=650");
}

Upvotes: 2

Related Questions