Display the URL created in the DIV

I have a JavaScript function that constructs a URL using form inputs and allows users to preview it in a DIV named "preview" before opening the URL in a new window via a submit button.

While everything is working as expected, I am looking for a way to modify the window.open function so that the webpage is opened within a DIV instead of a new window.

Here is my current code for the submit button to open the URL in a new window:

<input type="submit" onClick="window.open(document.getElementById('preview').innerHTML);" value="Open Launch URL in New Window" tabindex="10"/>

...where "preview" represents the ID of the DIV where the URL is displayed for preview.

I have tried implementing multiple onClick events but haven't been successful in achieving the desired result.

javascripthtmlcss

Answer №1

To display a preview of the launch URL, you can utilize an <embed> element with the src attribute linked to the specific URL. Here's an example:

<div id="launchPreview">
  <embed id="previewEmbed" src="">
</div>

<button type="button" onclick="document.getElementById('previewEmbed').src = document.getElementById('launchPreview').innerHTML;" tabindex="5">Open Launch Preview</button>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to retrieve a date from MySQL that is exactly 30 days ahead of today using PHP

My coding skills are lacking, so here is my current code (retrieve date from mysql = today --> alert) and I'm seeking assistance to modify it to (retrieve date from mysql + 30 days = today --> alert) <?php $check=mysql ...

javascriptphpmysql

I am facing issues with utilizing if endif for my Internet Explorer stylesheet in HTML/CSS

<!--[if IE]> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]--> <link rel="StyleSheet" href="style.css" /> Whenever I apply this code, the content in Internet Explorer is being influenced by both style.css and ie. ...

cssinternet-explorer

Error in Javascript chrome when trying to determine the length of an array

I am facing an unusual issue with the JavaScript console in Chrome. When I type the following code into the console: var numbers = new Array(["/php/.svn/tmp", "/php/.svn/props"]); it returns "undefined." This leads me to believe that 'numbers' ...

javascriptgoogle-chrome

Issue with Material UI button not properly redirecting to specified path

Having an issue with a button that should redirect to a specific component with props on click. <Button variant="contained" color="primary" className={classes.button} endIcon={<SendIcon/>} onClick={() => { <Redirect ...

javascriptreactjshttp-redirectreact-routermaterial-ui

Is it feasible to switch the classList of a form element that also has an event listener attached to it?

While I don't have a specific code snippet to share, I did have an idea and attempted to implement it. Unfortunately, it didn't yield the desired results. const validateEmailAddress = function (e) { const regex = /^[a-zA-Z0-9.!#$%&&apos ...

javascripthtmlcssformsdom

Tips for converting a "callback pyramid" into a promise-based structure

I'm currently struggling with understanding how to refactor my code to use promises or the Q library effectively. Let's consider a common basic example: I have a test case that imports the same file twice into a MongoDB database and then checks ...

javascriptnode.jsmongodbqshould.js

Is it possible to alter the content of an HTML element by utilizing PHP Include?

I am facing an issue with a PHP header setup similar to this: <body> <h1>Title</h1> </body> This code is in a file named header.php, but when I navigate to another page and include the header.php file like this: <?php include( ...

phphtml

Does the icon vanish once you alter the button's color?

Warning: Adult content Check out this website: link When you visit this page, you'll notice that the Add to Cart button is orange. The button also has an icon of a shopping cart. This icon only appears if you remove the following code. To make th ...

htmlcss

Difficulty Communicating Recapcha 2 with the PHP Script

I am currently testing the installation of reCaptcha 2 with server-side verification using a form with one input field. My process involves sending the reCaptcha response via Ajax to a PHP page for verification. While I am able to capture the information p ...

javascriptphphtmlajaxrecaptcha

Update the chat <div> automatically whenever a new message is added to the MySQL database

I have been looking online for a code that can update the chat <div> every time a new message is received from the other user. I have come across mentions of setTimeout() and setInterval(), but I would appreciate advice and assistance from more exper ...

javascriptphp

What is the best way to showcase a value in JavaScript using CSS styling?

I'm looking to customize the background, font style, and outline for both open and closed elements in the code snippet below: a.innerHTML = "We are Open now now."; a.innerHTML = "We are Closed, arm."; Additionally, I want to appl ...

javascripthtmlcss

Is there a way to retrieve a list of functions using ScriptEngine in Java?

I am using Jsoup to extract the JavaScript portion of an HTML file and store it as a Java String object. Furthermore, I am looking to extract lists of functions and variables within the JavaScript functions using javax.script.ScriptEngine. The JavaScript ...

javajavascriptscriptengine

React JS progress circle bar is a simple and effective way to visualize

Currently, I am in the process of developing a progress circle bar that will function as a timer alongside sliders. Each slide is intended to have its own corresponding progress bar. While I have managed to create the bars individually, I am facing challe ...

javascripthtmlcssreactjsslider

Building custom elements through static compilation

I enjoy using custom elements to efficiently organize the content on a webpage, focusing on semantics rather than getting caught up in the technical details. It seems that in order to utilize custom elements, I have to either depend on JavaScript or use m ...

html

Harness the power of the chessboard.js JavaScript library for enhancing your

I'm not very experienced with JavaScript. I'm trying to implement the chessboard.js library, but the chessboard I'm rendering is not showing the pieces, only the board itself. I followed the instructions provided here: How do I use chessboar ...

javascriptnode.jsnpmchessboard.js

How to inject a variable into an AngularJS service that utilizes both $http and $interval functions?

Struggling with $http and $interval, I stumbled upon this code. http://embed.plnkr.co/fSIm8B/script.js I forked it here: http://plnkr.co/edit/Al8veEgvESYA0rhKLn1q To make it more functional, how can I pass a variable to the service? Here is the broken ...

javascriptajaxjsonangularjs

Selenium WebDriver producing unexpected results with getTitle() method

Currently, I am executing an automated test script in a selenium-webdriver environment using Phantomjs. My approach involves running the script through node.js, rather than utilizing Python or C#. The steps I took to set up the environment are outlined b ...

javascriptnode.jsseleniumselenium-webdriverphantomjs

I am having difficulty aligning text horizontally within a <div> element using a combination of <div>, <a>, and <p> tags

I can't seem to figure out why I'm struggling with this. Check out the screenshot below: Here is my current CSS: #tabbase { display : inline-block; width : 230px; height : 173px; border : 1px solid #3e3e3e; background-color : #1b ...

htmlcss

Using GreenSock to animate and manipulate the tween function's parameters

I have two functions that are called on mouse events: function menuBtnOver(e){ var b = e.data; b.setPosition(b.x, b.y+5); } function menuBtnOut(e){ var b = e.data; b.setPosition(b.x, b.y-5); } Additionally, there is another function: setP ...

javascriptjquerycsstweengsap

Ways to retrieve a property that is dynamically generated within a React component

In the code snippet below, I have registered the TextField name as M1.${index}.M13-M14 and it is marked as required. However, I am unable to locate the property accessor using errors[`M1.${index}.M13-M14`]?.type, which prevents the error from being gener ...

javascriptreactjsreact-hooksmaterial-ui