I wrote javascript codes.
By clicking the button, the child window pops up and displays a text sent from the parent window using a postMessage function.
My code could sent a text to the child window, but there's no text displayed.
The text is displayed only when I keep clicking the button. I don't want the text to disappear.
I think my code is overridden by a blank script or something, though I don't write any other codes except for below.
Do you have any solution for this?
the parent window html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Parent Window</title>
</head>
<body>
<input type="button" value="TEST_BUTTON" id="testButton">
<script>
var testButton = document.getElementById('testButton');
testButton.addEventListener('click', function(event) {
event.preventDefault();
var newWindow = window.open('./child_window.html', 'popupWindow', 'width=400,height=300');
newWindow.postMessage('this is a content from the parent window.', '*');
return false;
},false);
</script>
</body>
</html>
the child window html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Pop Up Window</title>
</head>
<body>
<h1 id="mainText"></h1>
<script type="text/javascript">
var mainText = document.getElementById('mainText');
window.addEventListener('message', function(event) {
console.log(event.data);
this.mainText.innerText = event.data;
}, false)
</script>
</body>
</html>
I ended this up using localStorage instead.
Related
My sticking point is how to create two buttons and identify them separately within JS?
What the lecturer asks for in the image to create two buttons and two click functions.
My HTML code with the script tags:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Popup Boxes Lesson</title>
<body>
<button onclick="Enter Name">Click here for a popup alert</button>
</body>
<script>
function myFunction() {
alert("Enter your Name");
}
function myFunction(){
alert("Generate Greeting");
}
</script>
</html>
First of all create two different functions with different names.
Then you can use them with onclick
OR
Give them id and then use document.getElementById("id") to assign the click event on it. Something like this
<body>
<button id="foo">Click here for a popup alert</button>
</body>
<script>
document.getElementById('foo').onclick = function(){
prompt('Hello world');
}
</script>
There are several problems with your code:
First the click event you assigned to the button does not match the function you created.
Second don't create two functions with same names
The code should look like this:
<!DOCTYPE html>
<html>
<head>
<title>
Example
</title>
</head>
<body>
<button onclick="myFunction()">
Enter your name
</button>
<button onclick="generateMessage()">
Generate Message
</button>
<script>
function myFunction(){
var message = prompt("What is your name?");
}
function generateMessage(){
alert("Hello " + message);
}
</script>
</body>
</html>
I don't know why the code got no error but isn't displaying the message in JavaScript in the mood function ! It's only displaying the div.
function mood() {
var box = document.getElementById('t');
document.getElementById('t').innerHTML = "Hey <strong>Thanks!</strong>";
}
<div onload="mood()" style="display: block" id="t">HEYYYYY</div>
Add the onload in body instead of div
<!DOCTYPE html>
<html>
<head>
<title>MA page web</title>
<script>
function mood(){
var box = document.getElementById('t');
document.getElementById('t').innerHTML = "Hey <strong>Thanks!</strong>";
}
</script>
</head>
<body onload="mood()">
<div style="display: block" id="t">HEYYYYY</div>
</body>
</html>
var box = document.getElementById('t');
function mood() {
box.innerHTML = "Hey <strong>Thanks!</strong>";
}
window.addEventListener('load', mood)
<!DOCTYPE html>
<html>
<head>
<title>MA page web</title>
<script>
</script>
</head>
<body>
<divstyle="display: block" id="t">HEYYYYY</div>
</body>
</html>
You can use an event listener. This waits until the window is loaded and then runs the function. I hope this helps :)
The onload attribute is only supported on the following HTML tags: <body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script> and <style>.
I've adjusted your example below, moving the onload attribute to the body tag in this instance.
function mood() {
var box = document.getElementById('t');
document.getElementById('t').innerHTML = "Hey <strong>Thanks!</strong>";
}
<body onload="mood()">
<div id="t" style="display: block">HEYYYYY</div>
</body>
This code runs immediately once the page is loaded. The onclick event is completely ignored by javascript. What is an easy fix for this because like youtube when you play a video the document.title is updated with a speaker. I want to learn to do that with external javascript because I can do it with internal javascript in the html.
<!DOCTYPE html>
<html>
<head>
<title> Animation </title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="animationcss.css">
</head>
<body>
<script src="animation.js"></script>
<input id="changeButton" type="button" value="Change" ></input>
/External Javascript/
var element = document.getElementById("changeButton");
element.onclick = textChange("changetothis");
function textChange(text){
document.title = text;
}
try calling the function after the document is loaded by placing the script tag below the object or making $(document).ready() function,
this code works fine with me
<!DOCTYPE html>
<html>
<head>
<title> Animation </title>
<meta charset="UTF-8">
</head>
<body>
<input id="changeButton" type="button" value="Change" ></input>
<script src="script.js"></script>
<body>
</html>
and the script is
var el = document.getElementById("changeButton");
el.onclick = function(){
textChange("changetothis");
}
function textChange(text){
document.title = text;
}
You can achieve your desired effect by using an anonymous function, like so:
document.getElementById("changeButton").onclick = function () {
document.title = newTitle;
}
The variable 'newTitle' should be declared & initalized above this code somewhere in order for it to work.
I have a parent html file and want the user to click something which should then open a new window (or tab) containing the (dynamically generated) contents of a div in the parent (which is hidden in the parent).
From my reading here and elsewhere something like this should work:
parent.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Parent</title>
<script src="/js/jquery-1.11.0.min.js"></script>
</head>
<body>
<div id="from">
html from parent
</div>
<div id="launcher">
launch child
</div>
<script type="text/javascript">
$("#launcher").click(function() {
var child = window.open('child.html', '_blank', '', false);
if (child) {
var html = $("#from").html();
//window.setTimeout(child.addHTML(html), 5000);
child.addHTML(html);
}
else {
alert('Please allow popups for this site');
}
});
</script>
</body>
</html>
child.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Child</title>
<script src="/js/jquery-1.11.0.min.js"></script>
</head>
<body>
<div id="to"></div>
<script type="text/javascript">
function addHTML(html) {
$('#to').html(html);
}
</script>
</body>
</html>
However, regardless of using the commented-out setTimeout (incase the child hadn't loaded yet before calling the child's function), I get this error (in Safari, similar in Chrome) immediately:
'undefined' in not a function (evaluating 'child.addHTML(html)')
What am I doing wrong? Is there a better way to achieve my goals?
The first parameter of window.setTimeout should be the function to execute.
Try this:
if (child) {
var html = $("#from").html();
window.setTimeout(function(){child.addHTML(html);}, 5000);
}
I built a small example::
http://jsfiddle.net/rt19hv7v/
if the goal is only to add the content and not to call a function u can do it this way
if (child) {
child.addEventListener('load', function () {
var html = $("#from").html();
$('#to',child.document).html(html)
});
}else {
alert('Please allow popups for this site');
}
I created a demo page where I had a text box on parent window where I input the URL and on click of a button the URL loads on the Iframe.. and it works!
Below is the Code for the same:
HTML
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<iframe id="display" src="http://jqueryui.com"></iframe>
<br>
<input type="text" id="url" value="http://jquery.com">
<button type="button" id="load">Load</button>
JS:
$(document).ready(function () {
$('#load').click(function () {
$('#display').attr('src', $('#url').val());
});
});
And here is the Fiddle for 1st Option (which is working): http://jsfiddle.net/Hs87s/
BUT now the issue, I want to send the URL change request from one One iframe and load the URL in the Second Iframe.
All I did, added one new Frame and added button and text box in a different html and calling that html page in second iFrame. BUT this doesn't work.
below is the code for the second option:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
</script>
<style>
iframe {
width: 100%;
height: 200px;
}
</style>
</head>
<body>
<iframe id="display" src="http://jqueryui.com"></iframe>
<br>
<iframe id="inputURL" src="button.html"></iframe>
</body>
</html>
Code for button.html:
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function () {
$('#load').click(function () {
//alert("hi");
parent.$('#display').attr('src', $('#url').val());
});
});
</script>
</head>
<body>
<input type="text" id="url" value="http://jquery.com">
<button type="button" id="load">Load</button>
</body>
Can anybody please suggest how I can make the second option work?
Let me know if you need any other information.
Please suggest.
The "button" frame can access any parent JS function by prepending "parent." in front of it, as long as they're on the same domain.
So the button frame would use:
parent.functionname();
....then the parent would contain that function.
EDIT:
Your click handler needs to be in the same page as your button, and you need to refer to the frame in the parent:
$(document).ready(function() {
$('#load').click(function() {
//alert("hi");
parent.$('#display').attr('src', $('#url').val());
});
});