Display webpage in iframe dynamically - javascript

I want an input field with a submit button and a separate iframe where I can display a website made up from the input field. I have tried all sorts of things but nothing works. Can someone please tell me how I can achieve that. The text input field is a key to the page I want to display. What I want to do is to define an iframe with a page from my website and when the user enters a code in the text box, the iframe should display another page from my website. I want to run everything on my PC and nothing on the server. Below is my code:
<!DOCTYPE html>
<html>
<body>
<div id="app">
</div>
<style>
#boxes {
content: "";
display: table;
clear: both;
width: 145%;
}
div {
float: left;
height: 100px;
width: 100%;
padding: 0 0px;
}
#column0 {
width: 5.9%;
}
#column1 {
width:29.4%;
}
body {
font-family: sans-serif;
color:white;
display: grid;
height: 80vh;
place-items: start;
overflow-x:hidden;
}
</style>
<script>
document.getElementById("app").innerHTML = `
<main id="boxes">
<div id="column0">
<h4></h4>
</div>
<div id="column1">
<input id="pageId" name="pageId" type="text" required minlength="1"
maxlength="4" pattern="[a-z0-9]+">
<button id="pageIdBtn">Page ID</button>
</div>
</main>
`;
var x = document.getElementById("pageIdBtn");
x.addEventListener("click", pageIdFunction);
function pageIdFunction() {
var pageIdToInvoke = document.getElementById("pageId").value;
var myPage = "mywebsite/" + pageIdToInvoke;
var el = document.getElementById('userPage');
el.src = myPage;
};
</script>
<iframe name="userPage" src="mywebsite/home" style="width:1500px; height:
750px;">
</iframe>
</body>
</html>

Try This:
$('input#url').on('propertychange paste keyup',function(){
var url = this.value;
$('#frame').attr('src', url);
});
iframe {
position:fixed;
top:5;
left:0;
bottom:0;
right:0;
width:100%;
height:90%;
border:none;
margin:0;
padding:0;
z-index:99999;
}
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>display-webpage-in-iframe-dynamically</title>
</head>
<body>
<input type="text" id="url" name="url" value="https://">
<iframe src="" id="frame"></iframe>
</body>
</html>
If this helps please Up vote and mark as answer

Related

iFrame won't become visible when button is clicked

I have an iFrame in HTML code, and I created a script tag that I set on a submit button. I want the iFrame to be visible when I click on the submit button, but that is not working. Here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
body {
font-family: Arial;
}
* {
box-sizing: border-box;
}
form.example input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 80%;
background: #f1f1f1;
}
form.example button {
float: left;
width: 20%;
padding: 10px;
background: #2196F3;
color: white;
font-size: 17px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
}
form.example button:hover {
background: #0b7dda;
}
form.example::after {
content: "";
clear: both;
display: table;
}
#outerdiv
{
border:none;
width:100%;
height:500px;
overflow:hidden;
}
#innerIframe
{
border: none;
position:relative;
top:-190px;
width:100%;
height:900px;
}
</style>
</head>
<body>
<h2>Web Service</h2>
<script type="text/javascript">
function showIFrame() {
var iframe = document.getElementById("innerIframe");
iframe.style.visibility="visible";
}
</script>
<form class="example" method="post" style="margin:auto;max-width:500px">
<input type="text" placeholder="Search query" name="search2">
<button type="submit" name="submit" onclick="showIFrame()"><i class="fa fa-search"></i></button>
</form>
<br>
<div id="outerdiv" >
<iframe src={{results}} id="innerIframe" style="visibility: hidden;" scrolling="yes"></iframe>
</div>
</body>
</html>
{{results}} is the URL that is passed by the user in python Flask. So in the form the user types in a word, which then joins it to a URL and performs a search. The search works perfectly, but when the page is loaded on startup, it shows Not Found, the requested URL has not been found... and I understand why that happens as the URL hasn't been loaded yet. So I want to make the iFrame invisible, and once the submit button is pressed, the frame can be visible.
I have tried with jQuery as well, but it did not work.
All help and advice will be highly appreciated.
First pass "event" when you call the onClick function in your HTML code like this *onclick="showIFrame(event)
Then in your function, you accept the "event" as a parameter like this *function showIFrame(event) {
A click button most times trigers your page to refresh, so you have to stop that by preventing the default action. Add "event.preventDefault()" to your function like this *event.preventDefault()

Unable to set <iframe> srcdoc value using jquery

What I'm trying to do here is dynamically add and display content as HTML inside an iframe by using jquery to set the srcdoc attribute on the click of a button. Nothing happens though when I click on the button:
Strangely enough, when I replace $("#myFrame").srcdoc with document.getElementById("myFrame) the code works as intended. That further baffles me.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Jquery Project - Practice </title>
<script type = "text/javascript" src ="jquery-3.4.1.min.js"> </script>
<link href="jquery-ui/jquery-ui.css" rel ="stylesheet">
<script src = "jquery-ui/jquery-ui.js"> </script>
<style type="text/css">
html, body {
font-family:Helvetica, sans-serif;
margin:0px;
padding:0px;
height:100%;
width:100%;
}
div, textarea {
margin:0px;
padding:0px;
}
* {
margin:0px;
padding:0px;
}
#divOne {
width:100%;
height:100%;
background-color:aliceblue;
}
</style>
</head>
<body>
<div id="divOne">
<iframe id ="myFrame"></iframe>
<button id = "click"> Click Me! </button>
</div>
<script type ="text/javascript">
$(document).ready(function() {
$("#myFrame").css({
"height":"300px",
"width":"300px",
"margin":"200px",
"background-color":"bisque"
});
$("#click").click(function() {
$("#myFrame").srcdoc = "<p>Hello World!</p>" ;
//alert("clicked");
});
});
</script>
</body>
</html>
Set it by using .attr()
$(document).ready(function() {
$("#myFrame").css({
"height": "300px",
"width": "300px",
"margin": "200px",
"background-color": "bisque"
});
$("#click").click(function() {
$("#myFrame").attr("srcdoc", "<p>Hello World!</p>");
});
});
html,
body {
font-family: Helvetica, sans-serif;
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
div,
textarea {
margin: 0px;
padding: 0px;
}
* {
margin: 0px;
padding: 0px;
}
#divOne {
width: 100%;
height: 100%;
background-color: aliceblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="divOne">
<iframe id="myFrame"></iframe>
<button id="click"> Click Me! </button>
</div>

Create a popwindow on click of dropdown(There is no selection in the dropdown)

I need a popwindow on click or onfocus of the dropdown . In the popwindow I should display the checkboxes with multiselect option.I searched for this kind but I couldn't find any references.
Can anyone write code for this using jQuery.
Thank you
Try this code... hope it helps
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#pop
{
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color: rgba(0,0,0,0.5);
display: none;
}
#container
{
position: relative;
width:500px;
margin:100px auto;
background-color: white;
border-radius: 10px;
padding: 20px;
}
#ddown
{
width:100px;
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js">
</script>
<title></title>
</head>
<body>
<select id="ddown" >
<option></option>
</select>
<div id="pop" >
<div id="container">
<h1>Some Check box here</h1>
</div>
</div>
</body>
<script type="text/javascript">
$("#ddown").on("click",function(event){
event.preventDefault();
$("#pop").show();
})
$("#pop").click(function(){
$("#pop").hide();
})
</script>
</html>

Trying to code jQuery HTML5 chat box program with mouse click event response

I am having issues coding a chat box program for a school project. I am having 3 problems with the program. First, my chat message does not post properly in my chat box. Secondly, I want to be able to click exit and have it close to window but am not completely sure how to do it. Lastly, I would like the chat to echo the message or to have ahard coded response at the least. I'm researching how to do that I'm not quite sure how to do this. I have a style sheet and html. Here is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src=http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js ></script>
<link rel="stylesheet" type="text/css" href="jQuery.css">
//my issues seem to be in my Javascript between here************************************
<script type="text/javascript">
$(document).ready(function(){
$('#submitmsg').click(function(){
var message = $('#usermsg').val()
var old = $('#chatbox').html()
$('#chatbox').html(old + '<p>' + message + '</p>');
});
});
</script>
<script >
function close_window(url){
var newWindow = window.open('', '_self', ''); //open the current window
window.close(url);
};
</script>
//and here*****************************************************************************
</head>
<body>
<div id="wrapper">
<div id="menu">
<p class="welcome">Welcome <b></b></p>
//Possible issue here*******************************************************************
<p class="logout"><a id="exit" href="#" onclick="window.close();">Exit Chat</a></p>
<div style="clear:both"></div>
</div>
<div id="chatbox">
<p>Here's our chat data</p>
</div>
<form name="message" action="">
<input name="usermsg" type="text" id="usermsg" size="63" />
<input name="submitmsg" type="submit" id="submitmsg" value="Send" />
</form>
</div>
</body>
</html>
Here is my css:
body {
font:12px arial;
color: #222;
text-align:center;
padding:35px; }
form, p, span {
margin:0;
padding:0; }
input {
font:12px arial; }
a {
color:#0000FF;
text-decoration:none; }
a:hover {
text-decoration:underline; }
#wrapper, #loginform {
margin:0 auto;
padding-bottom:25px;
background:#EBF4FB;
width:75%;
border:1px solid #ACD8F0; }
#loginform {
padding-top:18px; }
#loginform p {
margin: 5px; }
#chatbox {
text-align:left;
margin:0 auto;
margin-bottom:25px;
padding:10px;
background:#fff;
height:270px;
width:430px;
border:1px solid #ACD8F0;
overflow:auto; }
#chatbox p {
padding:1em;
margin:1em;
background:#E6E6E6;
border:1px solid #BDBDBD;
-moz-border-radius:4px;
}
#usermsg {
width:395px;
border:1px solid #ACD8F0; }
#submit {
width: 60px; }
.welcome {
float:left; }
.logout {
float:right; }
.msgln {
margin:0 0 2px 0; }
Some of the css is unnecessary I'm pretty sure but when I tried taking some out it caused issues. Any help is greatly appreciated.
try copying the following - i put the styling into the head, moved the javascript to the end, and swapped the input for a button. This is ties to the onclick and appends the new comment into the chat window. It works, but could be done better, also I have not addressed the issue of closing the window, but this does post the new comment into the chat region.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" ></script>
<style>
body {
font:12px arial;
color: #222;
text-align:center;
padding:35px; }
form, p, span {
margin:0;
padding:0; }
input {
font:12px arial; }
a {
color:#0000FF;
text-decoration:none; }
a:hover {
text-decoration:underline; }
#wrapper, #loginform {
margin:0 auto;
padding-bottom:25px;
background:#EBF4FB;
width:75%;
border:1px solid #ACD8F0; }
#loginform {
padding-top:18px; }
#loginform p {
margin: 5px; }
#chatbox {
text-align:left;
margin:0 auto;
margin-bottom:25px;
padding:10px;
background:#fff;
height:270px;
width:430px;
border:1px solid #ACD8F0;
overflow:auto; }
#chatbox p {
padding:1em;
margin:1em;
background:#E6E6E6;
border:1px solid #BDBDBD;
-moz-border-radius:4px;
}
#usermsg {
width:395px;
border:1px solid #ACD8F0; }
#submit {
width: 60px; }
.welcome {
float:left; }
.logout {
float:right; }
.msgln {
margin:0 0 2px 0; }
</style>
</head>
<body>
<div id="wrapper">
<div id="menu">
<p class="welcome">Welcome</p>
<p class="logout"><a id="exit" href="#" onclick="window.close();">Exit Chat</a></p>
<div style="clear:both"></div>
</div>
<div id="chatbox">
<p>Here's our chat data</p>
</div>
<form name="message">
<input name="usermsg" type="text" id="usermsg" size="63" />
<button type="button" id="submitmsg" value="send">Send</button>
</form>
</div>
<script>
$(document).ready(function(){
$('#submitmsg').click(function(){
var message = $('#usermsg').val();
$('#chatbox').append('<p>' + message + '</p>');
$('#usermsg').val('');
});
});
function close_window(url){
var newWindow = window.open('', '_self', ''); //open the current window
window.close(url);
};
</script>
</body>
</html>
one problem is that you are using a form that then posts to the same page - reloading it.
I copied your code into a testpage (called chatTest.html) and got the following url after hitting the send button:
chatTest.html?usermsg=test+message&submitmsg=Send
your message does get posted into the chat section but is then removed when the page reloads. and because you are not specifying a method - it is treating it as a get form and posting the message as a querystring appended to the url.
if you are planning on saving the comments to a database, then you should change the action of the form to a different php page, process the results and return the saved content into the chat section- perhaps using Ajax so that you don;t have to reload the page on every chat submission.

How do I make all my javascript external with the window onload function?

I am trying to make all my JavaScript external including the onclick for the submit button, I have a commented out window.onload function that I can't get to work. When I remove the onclick="checkInput();" from the submit input and uncomment the window.onload event in the script , my form doesn't work.
Can someone explain what I am doing wrong besides being new to JavaScript.I have included a working snippet, just not external, thanks for any guidance.
/*----------------------------------------------
css settings for HTML div exactCenter
------------------------------------------------*/
#import url(http://fonts.googleapis.com/css?family=Raleway);
#main{
width:960px;
margin:50px auto;
font-family:raleway;
}
span{
color:black;
font-weight:bold;
}
h2{
background-color: white;
text-align:center;
border-radius: 10px 10px 0 0;
margin: -10px -40px;
padding: 30px;
}
hr{
border:0;
border-bottom:1px solid blue;
margin: 10px -40px;
margin-bottom: 30px;
}
#form_layout{
width:300px;
float: left;
border-radius: 10px;
font-family:raleway;
border: 2px solid #ccc;
padding: 10px 40px 25px;
margin-top: -2px;
}
input[type=text],input[type=password]{
width:99.5%;
padding: 10px;
margin-top: 8px;
border: 1px solid #ccc;
padding-left: 5px;
font-size: 16px;
font-family:raleway;
}
input[type=submit]{
width: 100%;
background-color:#0467fc;
color: white;
border: 2px solid #0467fc;
padding: 10px;
font-size:20px;
cursor:pointer;
border-radius: 5px;
margin-bottom: 15px;
}
a{
text-decoration:none;
color: cornflowerblue;
}
i{
color: cornflowerblue;
}
p{
font-size:16px;
font-weight:bold;
color:red;
}
<!DOCTYPE html>
<html>
<head>
<script>
//window.on onload functionload = function() {
//document.getElementById('submit').onclick = function(evt) {
//checkInput();
//}//end onload onclick
</script>
</head>
<body>
<div id="main">
<div id="form_layout">
<h2>Palindrome Test</h2>
<br>Enter a 10 character Palindrome.
<!-- Form starts here-->
<form name="pForm" id="pForm" method="post" >
<label>Palindrome:</label>:
<input type="text" name="uput" id="uput"/><br>
<!-- ... all the other stuff ... -->
</form><br>
<input type='submit' id="submit" value="Check Palindrome" onclick="checkInput();"/><br>
<p><span id="eMsg" class="error"></span><p/><br>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>isPalindrome</title>
<script>
//window.on onload functionload = function() {
//document.getElementById('submit').onclick = function(evt) {
//checkInput();
//}//end window.onload
Palindrome(str);
</script>
</head>
<body>
<div id="main">
<div id="form_layout">
<h2>Palindrome Test</h2>
<br>Enter a 10 character Palindrome.
<!-- Form starts here-->
<form name="pForm" id="pForm" method="post" >
<label>Palindrome:</label>:
<input type="text" name="uput" id="uput"/><br>
<!-- ... all the other stuff ... -->
</form><br>
<input type='submit' id="submit" value="Check Palindrome" onclick="checkInput();"/><br>
<p><span id="eMsg" class="error"></span><p/><br>
</div>
</div>
</body>
</html>
You have to wait for the DOM to finish loading before you can query it to find DOM elements and atach events.
The simplest fix would be placing your <script> at the end of body.
Another fix is to attach handlers in window onload event ( that's how it works in code snippet below)
In code snippet provided in question the the way window.onload was attached was unclear. Also at the end of script expression Palindrome(str); raised error as var str is undefined, so i've fixed it.
See working snippet below:
document.getElementById('submit').onclick = function(evt) {
checkInput();
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function(){
document.getElementById('submit').onclick = function(evt) {
checkInput();
};};
function checkInput() {
alert('Check input fired');
}//end check input
</script>
</head>
<body>
<div id="main">
<div id="form_layout">
<h2>Palindrome Test</h2>
<br>Enter a 10 character Palindrome.
<!-- Form starts here-->
<form name="pForm" id="pForm" method="post" >
<label>Palindrome:</label>:
<input type="text" name="uput" id="uput"/><br>
<!-- ... all the other stuff ... -->
</form><br>
<input type='submit' id="submit" value="Check Palindrome" /><br>
<p><span id="eMsg" class="error"></span><p/><br>
</div>
</div>
</body>
</html>

Categories