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');
}
Related
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.
please, help, I try to get href of links inside div using jquery, but unfortunatelly, it doesn`t work.
Here is my page, where I dynamically get other divs(inside them links are located) inside #films
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cinemas</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<div id = "films"></div>
<script src="script.js"></script>
</body>
</html>
Here is my script.js:
$(document).ready(function() {
$.get(myUrl, function(data) { // this block works
$('#films').html($('.block_afisha', data).html())
});
$('#films').find('a').each(function() { // there is no iterations here
console.log($(this).attr('href'));
});
});
How can I fix it?
You can try this code -
$(document).ready(function() {
$.get(myUrl, function(data) { // this block works - async block
$('#films').html($('.block_afisha', data).html());
$('#films').find('a').each(function() { // this will work if above call has added links with anchor tag
console.log($(this).attr('href'));
});
});
});
You can just load the links and then iterate through them:
<div id="elems">
One
Two
Three
</div>
$.each($('#elems > a'),function(data,value){
console.log($(value).attr('href'));
});
Hello, I am new to HTML and JS therefore would like to ask for some help.
Here I want to display two different HTML elements according if statement is true or false. However, it does not work.
Could I get some help? (:
<!DOCTYPE html>
<html>
<body>
<script>
if (!user) {
<h1> there is no user </h1>
} </script>
if (user) {
<button type="button">Click Me!</button>
} </script>
</body>
</html>
Here is a native Javascript alternative
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="content"></div>
<script>
var el = document.getElementById('content');
var content;
if (!user) {
content = '<h1>there is no user</h1>';
}
if (user) {
content = '<button type="button">Click Me!</button>';
}
el.insertAdjacentHTML('afterbegin', content);
</script>
</body>
</html>
This won't work as is unless the user variable is defined, though, but I'm assuming you already have it available at runtime.
If you have more html in this div you can use a different insert position, see the documentation about it here: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
Using jQuery you would do something like this
html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
</body>
</html>
JS
if(!user){
$('body').append('<h1>There is no user</h1>')
} else if(user) {
$('body').append('<button>Login</button>')
}
See js fiddle here.
Also, note that if you want to use jquery include the script in the head
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Unfortunately you can't add HTML directly in a block of javascript. What you can do instead though is use jQuery to append a block of HTML.
To do this, you would load jQuery by adding this line to your head tag
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
And then replace your inline javascript with the following:
<script>
if (!user) {
$(document.body).append( "<h1> there is no user </h1>" );
}
if (user) {
$(document.body).append( "<button type='button'>Click Me!</button>" );
} </script>
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 am using window.opener.functionName() in IE to call the parent function from a child window, which is working perfectly fine. However, the same is not working in Chrome/Firefox.
I tried window.top.functionName(); parent.window.top.functionName() and numerous others. None are working.
Can anybody help!
EDIT
Here is the code.
Note that I have 2 level hierarchy. I need to call the updateHTML() function of Parent.jsp from ChildCall2.jsp file
Parent.jsp
<!DOCTYPE html>
<html>
<head>
<TITLE>Parent function call test</TITLE>
<script>
function openwindow(url)
{
Hints=window.open(url, 'Hints', "resizable=yes,scrollbars=yes,width=475,height=225");
if(Hints.blur)
Hints.focus();
}
function updateHTML()
{
alert("Parent called successfully");
}
</script>
</head>
<body onFocus="">
Click Me
</body>
</html>
ChildCall.jsp
<!DOCTYPE html>
<html>
<head>
<TITLE>Child function call test</TITLE>
<script>
function openwindow(url)
{
Hints=window.open(url, 'Hints', "resizable=yes,scrollbars=yes,width=475,height=225");
if(Hints.blur)
Hints.focus();
}
function updateHTML1()
{
alert("Parent call function");
window.opener.updateHTML();
}
</script>
</head>
<body onFocus="">
Click Me
</body>
</html>
ChildCall2.jsp
<!DOCTYPE html>
<html>
<head>
<TITLE>Child function2 call test</TITLE>
<script>
function openwindow(url)
{
Hints=window.open(url, 'Hints', "resizable=yes,scrollbars=yes,width=475,height=225");
if(Hints.blur)
Hints.focus();
}
function updateHTML2()
{
alert("Parent call function2");
window.opener.updateHTML1();
}
</script>
</head>
<body onFocus="">
Click Me to call parent function
</body>
</html>
All your pop-ups have the same name (window.open(url, 'Hints', ...)), this might confuse some browsers so they recognize some other window being their opener.
Just a sidenote, detecting if a window has blur method is unnecessary, just do Hints.focus().