pass url to document.write

Question

I have been trying to pass URL to this function but it just does not seem to click for me. I am still learning. :( Would anybody be able to help, please? I have many limitation that I am trying to work around (in case you are wondering what I am trying to do here).

I would like to include the URL (test.html) in the href tag in html instead of including it in the function itself. That way I would be able to reuse this function for all my links. I hope this makes sense.

Javascript:

function myFunctionA() {
    var myWindow = window.open("", "MsgWindow", "width=1000,height=700");
    myWindow.document.write('<iframe name="contentwin" src="test.html" scrolling="yes" frameborder="0" height="100%" width="100%"></iframe>');
    myWindow.document.close();
}

Html:

<a href="#" onClick="myFunctionA()">link</a>

Are you asking for a way to have `myFunctionA()` open a different URL, depending on how it's used? Look into function parameters and string concatenation. — theGleep, Oct 03 '17 at 20:20
Yes, I would like to use this function to open multiple links. For example, instead of setting iframe src=test.html I would like that to be iframe src=URL and then pass test.html as the URL from the link. Does it make any more sense now? — Irma, Oct 03 '17 at 20:30

score 1 · Answer 1 · answered Oct 03 '17 at 20:30

Using ES5 syntax and standard string concatenation:

function myFunctionWithParam(pageName) {
  console.log("Open " + pageName + "page");
}

myFunctionWithParam("test.html");

The same example using ES6 syntax, arrow function and template literals:

const myFunctionWithParam = (pageName) => {
  console.log(`Open ${pageName} page`);
}

myFunctionWithParam("test.html");

Try implementing it into your code example. Good Luck!

Get Off My Lawn · Answer 2 · 2017-10-03T20:58:30.883

ES6

You can use the tick mark to insert data into a string, then you can use ${my_variable} to use a variable within the string. These are known as template literals

It would look something like this:

function myFunctionA(url) {
    var myWindow = window.open("/myPage.html", "MsgWindow", "width=1000,height=700");
    myWindow.document.write(`<iframe name="contentwin" src="${url}" scrolling="yes" frameborder="0" height="100%" width="100%"></iframe>`);
    myWindow.document.close();
}

myFunctionA('http://example.com')
myFunctionA('http://another-example.com')

ES5

You can use the + operator to concatenate multiple strings together.

It would look something like this:

function myFunctionA(url) {
    var myWindow = window.open("/myPage.html", "MsgWindow", "width=1000,height=700");
    myWindow.document.write('<iframe name="contentwin" src="' + url + '" scrolling="yes" frameborder="0" height="100%" width="100%"></iframe>');
    myWindow.document.close();
}

myFunctionA('http://example.com')
myFunctionA('http://another-example.com')

concat()

Using the concat() method allows you to pass unlimited arguments and they will all be concatenated together. Here I pass an array, but using the ... (Spread Syntax Notation) I can pass it as one argument

function myFunctionA(url) {
    var myWindow = window.open("/myPage.html", "MsgWindow", "width=1000,height=700");
    var items = [
        '<iframe name="contentwin" src="',
        url,
        '" scrolling="yes" frameborder="0" height="100%" width="100%"></iframe>'
    ];
    myWindow.document.write(''.concat(...items));
    myWindow.document.close();
}

myFunctionA('http://example.com')
myFunctionA('http://another-example.com')

Scott Marcus · Answer 3 · 2017-10-04T17:27:35.633

As you are new to JavaScript, it's best not to pick up bad habits right from the start. One of the worst practices that continues to this day is using inline HTML event attributes (onclick, onmouseover, etc.). There are many reasons not to use them and you can see them here.

Next, don't use the a element when you aren't actually navigating anywhere (after all, you are setting the href attribute to # to indicate that you don't want to actually go anywhere). It is semantically incorrect and can cause problems for people who rely on screen readers to visit your page. Just about any element can have a click event, so a div or button element would do the trick.

Or, if you wanted to dispense with the need to create and open the new window yourself, then a would be appropriate and all you'd need is:

<a href="test.html" target="_blank">link</a>

The target="_blank" will cause the page to open in a new browser window at full size.

Next, the file needs to be injected into the function from somewhere, this is a great use-case for HTML data-* attributes. You can have multiple links that call your function but each can store a different page that should be used in the function. When you need to get the actual value from the attribute, you can use the dataset object to extract it.

Lastly, since you are showing that you want the iframe to fill up the entirety of the new window, you don't really need an iframe at all, just populate the new window with your desired page.

Following modern standard, the code would be (the window will not actually open in the code snippet below due to the restrictions on code in Stack Overflow, but you can see a working version here):

// First, get a reference to the HTML element you wish to work with. 
// There are many ways to do this (via an id, via a CSS selector, via
// the element's position in the document) with .getElementById() or
// .querySelector(), etc. Here, I've used an id in the HTML, so we'll
// get the element by its id:
var link = document.getElementById("openIFrame");

// Next, register the event handling function with the event
link.addEventListener("click", myFunctionA);

function myFunctionA() {
  // When the function is invoked, the keyword "this" will be bound to the HTML
  // element that triggered the event. From there, you can access your custom
  // data property with: dataset.propName which only needs to be passed to your 
  // window.open invocation since the only thing you want in the new window is
  // the contents of the new file:
  var myWindow = window.open(this.dataset.file, "MsgWindow", "width=1000,height=700");
}

<div id="openIFrame" data-file="test.html">link</div>

But, if you do need the iframe, you'd just concatenate the same this.dataset.file into the string that creates the iframe:

// First, get a reference to the HTML element you wish to work with. 
// There are many ways to do this (via an id, via a CSS selector, via
// the element's position in the document) with .getElementById() or
// .querySelector(), etc. Here, I've used an id in the HTML, so we'll
// get the element by its id:
var link = document.getElementById("openIFrame");

// Next, register the event handling function with the event
link.addEventListener("click", myFunctionA);

function myFunctionA() {
  // When the function is invoked, the keyword "this" will be bound to the HTML
  // element that triggered the event. From there, you can access your custom
  // data property with: dataset.propName which only needs to be concatenated
  // into your string for the iframe:
  var myWindow = window.open("", "MsgWindow", "width=1000,height=700");
  myWindow.document.write('<iframe name="contentwin" src="' + 
                          this.dataset.file + 
                          '" scrolling="yes" frameborder="0" height="100%" width="100%"></iframe>');
  myWindow.document.close();
}

<div id="openIFrame" data-file="test.html">link</div>

Thank you so much @Scott Marcus. I am actually adding other information to the new window. I am adding a few images to the top of the new window to serve as top navigation. The reason I am including iframe is because I wanted to have the same iframe to populate when these top navigation buttons are clicked. I have to use iframes for that reason, right? — Irma, Oct 04 '17 at 14:16
@Irma You don't have to, no. Today, we make AJAX calls to asynchronously go up to the server and fetch new content that needs to be injected into the page. I'll update my answer to add the `iframe` back in though. You'd still use the same techniques that I describe. — Scott Marcus, Oct 04 '17 at 17:24

score 0 · Accepted Answer · answered Oct 03 '17 at 21:08

You can create a links that look like regular HTML links, but also call a function. You pass the "this" to the function to get a reference to the original object which made the function call. (in this case the a href).

<a href="test.html" onClick="myFunctionA(this); return false">test page</a>

Here, I return false so that the normal handling is not done. If I omitted it, it would call your function (which pops up a window with test.html), and then replaces the current page with test.html, which I assume you don't want.

I pass "this" to the function, and in the function, I name it myobject. In the function, I can see the href of the object which called it with:

var hrefTarget = myobject.href;

Of course, you can use some clever template stuff to include the hrefTarget into the string, but I use plain old fashioned + with strings, (just to keep on topic).

A working example follows:

<body>

<div>
  <ul>
    <li><a href="test.html" onClick="myFunctionA(this); return false">test page</a>
    <li><a href="otherpage.html" onClick="myFunctionA(this); return false">other page</a>
  </ul>
</div>


<script>
function myFunctionA(myobject) {

var myWindow = window.open("", "MsgWindow", "width=1000,height=700");
var hrefTarget = myobject.href;
myWindow.document.write('<iframe name="contentwin" src=' + hrefTarget + ' scrolling="yes" frameborder="0" height="100%" width="100%"></iframe>');
    myWindow.document.close();
}
</script>
</body>

Inline HTML event attributes (`onclick`) should not be used. That is how we did it 100 years ago. See **[this](https://stackoverflow.com/questions/43459890/javascript-function-doesnt-work-when-link-is-clicked/43459991#43459991)** for the many reasons not to use them. — Scott Marcus, Oct 03 '17 at 21:12

pass url to document.write

4 Answers4

ES6

ES5

concat()