JavaScript/HTML5 Take URL from form and open it in a new Window iframe

Question

I'm currently trying to write a JavaScript function that will take a URL from a form once the user has entered it into a textbox and clicked a button to open in a new window that contains an iframe. Here's what I currently have:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
label {
display:block;
}
</style>
<script type="text/javascript">

function goTo() {
    var url = document.forms[0].url.value;
    myWindow = window.open('', '', 'width=800,height=800');
    myWindow.document.write("<iframe src='url'></iframe>");
    myWindow.focus();
    return false;
}

</script>
</head>
<body>
<form action="" method="get" onsubmit="return goTo()">
    <label for="url">Enter the URL:
    <input type="text" name="url" id="url">
    <input type="submit" value="Submit">
</form>
</body>
</html>

The main problem I'm currently having is determining how to pass the url variable into the document.write() method. It will work fine when I try a typical source URL in the iframe, but naturually that defeats the purpose since I want to use a user passed-in value. Any assistance is welcomed, I have no vanity-of-authorship so if I'm fundamentally doing things wrong, I'm ok with that -- seeking you pros to let me know.

I'm just wondering what's the point of the iframe if you already use a new window. — Christophe
– Christophe, Commented Oct 4, 2013 at 0:16

Lance · Accepted Answer · 2013-10-04 00:31:40Z

1

The url variable is part of a string in your example. Try this instead. Also, make sure that it's a valid URL.

myWindow.document.write("<iframe src='"+ url +"'></iframe>");

I might also add that writing an iframe in the new window is a bit redundant. you should just do

myWindow = window.open(url, "", "width=800,height=800");

edited Oct 4, 2013 at 0:31

answered Oct 4, 2013 at 0:15

Lance

4,83016 gold badges56 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Aaron Over a year ago

Lance, thanks a million! That worked perfectly and solved the issue. Is there some way I can mark this as solved? Again -- you rock!

Lance Over a year ago

Sure. Just click on the green checkmark next to my answer and upvote it too by clicking the up arrow! Glad that I was able to help!

Aaron Over a year ago

I hit the check mark, but don't have high enough reputation yet for an upvote -- I'll come back when I do. Thanks again!

Collectives™ on Stack Overflow

JavaScript/HTML5 Take URL from form and open it in a new Window iframe

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related