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());
});
});
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.
When I click The button it does not show me any output on the console window
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button type="button" id="Click me">Click me</button>
<script type="text/javascript" src="script.js">
</body>
</html>
->js
var printNumber=document.getElementById('Click me');
printNumber=document.addEventListener('Click',showNo);
function showNo() {
console.log('I was Clicked');
}
You have a few issues with your code.
Firstly you need to close your <script> tag in your HTML:
<script type="text/javascript" src="script.js"></script>
Secondly, your id shouldn't have spaces in it. You can change it to something like btn-click:
<button type="button" id="btn-click">Click me</button>
And then make sure to target it properly in your Javascript:
var printNumber=document.getElementById('btn-click');
Thirdly, your event name should be lowercase (as Javascript is case-sensitive), so change "Click" to "click"
Lastly, you want to add the click event listener to your button, which is stored in the variable printNumber. At the moment you are adding the event listener to your document and not the button. To add it to your button you can use:
printNumber.addEventListener("click", showNo); // add click event listener to button
See working example below:
var printNumber = document.getElementById('btn-click'); // change id selector
printNumber.addEventListener('click', showNo); // change 'Click' to 'click'
function showNo() {
console.log('I was Clicked');
}
<!DOCTYPE html>
<html>
<head>
<title>Awesome button</title>
</head>
<body>
<button type="button" id="btn-click">Click me</button> <!-- change id -->
<script type="text/javascript" src="script.js"></script> <!-- close script -->
</body>
</html>
It should be click not Click!
JavaScript is a case-sensitive language. This means that the language keywords, variables, function names, and any other identifiers must always be typed with a consistent capitalization of letters.
var printNumber=document.getElementById('Click me');
printNumber=document.addEventListener('click',showNo);
function showNo() {
console.log('I was Clicked');
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button type="button" id="Click me">Click me</button>
</body>
</html>
You had one typo Click which is supposed to be click.
`printNumber=document.addEventListener('Click',showNo);`
^^^^^^^^
you should add event listener to that particular element not to the complete document.
var printNumber=document.getElementById('Click_me');
printNumber.addEventListener('click',showNo);
function showNo() {
console.log('I was Clicked');
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button type="button" id="Click_me">Click me</button>
</body>
</html>
I have this java script function:
function copyToClipboardCrossbrowser2(text) {
alert(text);
$('#Button1').zclip({
path: '/js/ZeroClipboard.swf',
copy: text
});
}
when I make path: js/ZeroClipboard.swf , google chrome tells me that this file is not exist. but when I put the / it doesn't tell me that it is not working. so the swf is installed.
the alter is printing the correct value. but the copy is not working.
why please?
I already include these:
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.zclip.js"></script>
Note
In another project, I am working with this library, which means my flash player is working
This is the html of the button that has the id Button
<button type="button" id="Button1" class="copyToBtn" onclick="copyToClipboardCrossbrowser2('00971509396782',this);" title="Copy">
Copy Phone Number</button>
I am working asp.net
and this is the code of the button
<button type="button" id="Button1" class="copyToBtn" type="button" onclick="copyToClipboardCrossbrowser2('<%#Eval("Telephone")%>',this);"
title="Copy">
Copy Phone Number</button>
The id is not changing that is why I gave you the html
js fiddle:
http://jsfiddle.net/6HPuC/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/zclip/1.1.2/jquery.zclip.min.js"></script>
<title>Test</title>
</head>
<script>
$(function() {
$("#Button1").zclip({
path: 'http://cdnjs.cloudflare.com/ajax/libs/zclip/1.1.2/ZeroClipboard.swf',
copy: function() {
return $(this).data("copy");
}
});
});
</script>
</head>
<body>
<button type="button" data-copy="<%#Eval('Telephone')%>" id="Button1" class="copyToBtn" title="Copy">Copy Phone Number</button>
</body>
</html>
In your code you have used on button click event to bind zClip with button which is Wrong.
When you attach ZClip to button it will automatically handles OnClick event, no need to write on button event
Below is your modified code
<script type="text/javascript">
$(document).ready(function () {
$('#Button1').zclip({
path: '/js/ZeroClipboard.swf',
copy: $('#Button1').attr('data-copy')
});
});
</script>
And button event will be as below:
<button type="button" id="Button1" class="copyToBtn" data-copy="<%#Eval('Telephone')%>" title="Copy">
Copy Phone Number</button>
Please bear with me because I'm student. My instructor had us watch 5 YouTube videos and now expects us to program using JQuery instead of standard JavaScript. All I want to do is swap an element with an element from another file.
Here's my HTML code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Testing JQuery</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<h1 id="header">Testing JQuery</h1>
<p id ="dummy">Lorem Ipsum </p>
<script src="changes.js"></script>
<form name="input" action="changes.js">
<input type="button" value="Change the Header">
</form>
</body>
</html>
Here is my JavaScript/JQuery code:
$(document).ready(function() {
$('input').click(function() {
var url = $(this).attr('form');
$('#header').load( greeting.html + '#ajax h1');
return false;
});
});
The third file is called greeting.html and this is all it contains:
<h1 id="ajax">Hello from jQuery with AJAX</h1>
$('#header').load( 'greeting.html #ajax' );
That's all you need. Get rid of all the other stuff.
You dont need to declare url and you dont need to return false.
To replace the element, load() won't work as it loads the new H1 inside the old H1, it does not replace it, so you have to use $.get and do it yourself :
$(document).ready(function() {
$('input').on('click', function() {
$.get({
url : 'greeting.html'
}).done(function(data) {
var h1 = $('<div />').append(data).find('h1#ajax');
$('#header').replaceWith(h1);
});
return false;
});
});
I have two iframes in the document movie.htm:
<iframe id='movies' class='top' frameborder='0'></iframe>
and
<iframe src="moviesearch.htm" class="bottom" frameborder="0">
Within moviesearch.htm there is an input tag
<input id="search_str" type="text">
I was wondering how I access this value (contained in moviesearch.htm) using JavaScript in the document movie.htm.
As the user is typing the field continuously it would require that the value be updated real-time within movie.htm.
How would I achieve this in JavaScript?
If both pages are in the same domain, you'll be able to iframe.contentDocument. https://developer.mozilla.org/en/XUL/iframe#p-contentDocument
postMessage.
https://developer.mozilla.org/en/DOM/window.postMessage
movie.htm:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Current value:<div id="updatedvalue"></div>
<iframe src="moviesearch.htm"></iframe>
</body>
<script>
window.addEventListener
("message", function(e) {
document.getElementById("updatedvalue").innerHTML = e.data;
}, true);
</script>
</html>
moviesearch.htm:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="text" onkeyup="sendMessage(this.value)">
</body>
<script>
function sendMessage(message) {
window.parent.postMessage(message, "*");
}
</script>
</html>