Is there a way to pass a variable from 1 page that has a popup iframe on it to the popup (iframe) on client side button click without using query strings? my variable is too big to use a query string?
Another way to ask the same question
Is there a way to pass a variable from 1 page to another page on client side button click without using query strings? my variable is too big to use a query string?
This is for use on IE 8 and higher html 5 storage will not work
If your two pages are on the same domain, you can use HTML5 LocalStorage. It's a JavaScript object that can hold strings up to around 5MB or so.
If you need to store other data than strings, you can use JSON.stringify() and JSON.parse() to convert between your datatypes and strings.
Without HTML5
You have the option to use cookies and get/set them with JavaScript, otherwise there are many LocalStorage polyfills to choose from which should be able to work in restricted environments.
You can call a function that exists on the child window from the parent and pass data from parent to child.
I apologize for this very basic example, where we pass whatever is in the variable dummy_txt from the parent window to the child window.
Parent (parent.htm)
<html>
<body>
<input id="btn" type='button' value='Open Window' />
<script>
var child_win;
document.getElementById("btn").onclick = function () {
child_win = window.open("child.htm");
dummy_txt = 'blah blah blah blah blah...'
setTimeout(function () {
child_win.document.write(dummy_txt);
// Hey, you can do child_win.my_own_function(dummy_txt)
}, 2000);
}
</script>
</body>
</html>
Child (child.htm)
<html><body></body></html>
Not the cleanest approach, but you can also do something similar to what Nabil suggested by having the child iframe call a javascript function via window.parent
var myValueFromParent = window.parent.SomeFunctionOnParentFrame();
I have used this method not to pass a value from parent to child but rather have child signal parent.
Try the following:
Main Page
<html>
<head>
<title>JS Iframe Test</title>
</head>
<body>
<iframe id="frame" src="js-test-iframe.htm"></iframe>
<br /><br />
<input type="text" id="toInject" /> <button id="send">Send To Iframe</button>
<script type="text/javascript">
document.getElementById('frame').onload = function(){
document.getElementById('frame').contentWindow.doSomething("Hi");
}
var btn = document.getElementById('send');
btn.addEventListener("click", function(){
var text = document.getElementById('toInject').value;
document.getElementById('frame').contentWindow.doSomething(text);
// window.frames[0].doSomething(text); // An alternative
}, false);
</script>
</body>
</html>
IFrame Page (js-test-iframe.htm)
<html>
<head>
<script type="text/javascript">
function doSomething(text)
{
document.getElementById('valueHere').innerHTML = text;
}
</script>
</head>
<body>
<div id="valueHere">Default Text</div>
</body>
</html>
Do keep in mind that you need to wait for the iframe to load before you manipulate or pass any variables to it. Also note that this only works if you are sourcing a page within the same domain.
Related
I have problems with accessing the location attribute of the window object, which I need to redirect the user to another page via JavaScript/jQuery. I know you normally should use an .htaccess file to do this, but I'm actually writing an nw.js application, so I have no server.
Here is an example source code:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery-3.2.1.js">
</script>
<script>
$(function() {
$("#testbutton").click(function() {
$("#testbutton).before($(window).attr("location"));
});
});
</script>
</head>
<body>
<button type="button" id="testbutton">Click me</button>
</body>
</html>
This should, if it worked, get the value of the location attribute and insert it before the button when the button gets clicked.
In reality, it doesn't do anything. I also tried to assign the value of the location attribute to a variable, or write this in plain JavaScript (which I intend to avoid), but neither did change the fact that nothing happens.
Is it possible to access the location attribute of the window object via jquery? And if it's possible, what's my mistake?
I wanted to print the value first before changing it, because I like to develop projects step by step. I know this code is not going to change the location attribute, but I wonder why it's not even getting the value?
You don't need jQuery....just access the location.href directly
$(function() {
$("#testbutton").click(function() {
$("#testbutton").before(location.href);
});
});
<script src="//code.jquery.com/jquery-3.2.1.js"></script>
<button type="button" id="testbutton">Click me</button>
The window Object is a global Object and has many properties that you can read and edit , one of this properties is the location Object which is not a text its an object that holds some information about the current location and urls but you can access the current url location using location.href and then you can insert this text any place you want , look at the example below
$(function() {
$('#testbutton').click(function() {
var currentUrl = window.location.href;
$('#testbutton').before(currentUrl+'<br>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<button type="button" id="testbutton">Click me</button>
</body>
I'm trying to change the value of a text box within iframe.
I have tried using GetElementById in every way i could find and nothing seems to work.
I found a alternative to iframe by using the Object data tag but it has the same problem.
My code more or less, I changed it a bit for presentation:
<html>
<head>
<title>None</title>
</head>
<body>
<script type="text/javascript">
function changeValue() {
var textBox = document.getElementById('userName');
textBox = "hello!";
}
</script>
<iframe id="myFrame" src="http://www.website.com"></iframe>
<input type="button" onclick="changeValue()" value="Submit">
</body>
</html>
This is not possible for security reasons.
If you had access, you would be able to load, say facebook.com in an iframe on your website and extract user details with JavaScript.
Try something along the lines of
document
.getElementById('myFrame')
.contentWindow
.document
.getElementById('userName')
.value='hello';
As the others pointed out, this will only work if the page inside the iframe is on the same domain.
What i'm trying to do, is pass the object of the link to my javascript function for an ajax query so I can add a loading image next to the link while it's loading.
I thought of wrapping a div around it with the event.
Is this compliant, and will work with all browsers? It seems to work in the one's I have tested, but I only have the newer versions.
<html>
<script>
blah = function(obj){
alert(obj);
return false;
}
</script>
<body>
<div onclick="return blah(this);">work!</div>
</body>
</html>
What I need to be sure of, will doing the return false; on the parent div of the link make sure that when the link is clicked it will not go to the url?
It doesn't seem possible to pass the object of an actual href=. Maybe i'm wrong?
You are wrong. Currently you are not passing the element to your function, but your div.
You can try this:
<html>
<script>
blah = function(objId){
var linkElement = document.getElementById(objId);
var fakeHref = linkElement.getAttribute('fakehref');
alert(fakeHref);
}
</script>
<body>
<a id="link" href="javascript:blah('link');" fakehref="http://www.google.com/">work!</a>
</body>
</html>
Click here to see a working example: http://jsfiddle.net/wYu5M/
I'm trying to write a web application using the new offline capabilities of HTML5. In this application, I'd like to be able to edit some HTML—a full document, not a fragment—in a <textarea>, press a button and then populate a new browser window (or <iframe>, haven't decided yet) with the HTML found in the <textarea>. The new content is not persisted anywhere except the local client, so setting the source on the window.open call or the src attribute on an <iframe> is not going to work.
I found the following question on StackOverflow: "Putting HTML from the current page into a new window", which got me part of the way there. It seems this technique works well with fragments, but I was unsuccessful in getting an entirely new HTML document loaded. The strange thing is when I view the DOM in Firebug, I see the new HTML—it just doesn't render.
Is it possible to render a generated HTML document in a new window or <iframe>?
EDIT: Here's a "working" example of how I'm attempting to accomplish this:
<!doctype html>
<html>
<head>
<title>Test new DOM</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
function runonload() {
return $("#newcode")[0].value;
}
$(function() {
$("#runit").click(function() {
w=window.open("");
$(w.document).ready(function() {
$(w.document).html(w.opener.runonload());
});
});
});
</script>
</head>
<body>
<textarea id="newcode">
<!doctype html>
<html>
<head>
<title>New Page Test</title>
</head>
<body>
<h1>Testing 1 2 3</h1>
</body>
</html>
</textarea>
<br/>
<button id="runit">Run it!</button>
</body>
</html>
I think you are overcomplicating this...
try this:
<SCRIPT LANGUAGE="JavaScript">
function displayHTML(form) {
var inf = form.htmlArea.value;
win = window.open(", ", 'popup', 'toolbar = no, status = no'); win.document.write("" + inf + ""); } // </script>
<form>
<textarea name="htmlArea" cols=60 rows=12> </textarea> <br> <input type="button" value=" Preview HTML (New Window)" onclick="displayHTML(this.form)"> </form>
$(w.document).html(w.opener.runonload());
You can't set innerHTML—or, consequently, jQuery's html()—on a Document object itself.
Even if you could, you wouldn't be able to do it using html(), because that parses the given markup in the context of an element (usually <div>) from the current document. The doctype declaration won't fit/work, putting <html>/<body>/etc inside a <div> is invalid, and trying to insert the elements it creates from the current ownerDocument into a different document should give a WRONG_DOCUMENT_ERR DOMException. (Some browsers let you get away with that bit though.)
This is a case where the old-school way is still the best:
w= window.open('', '_blank');
w.document.write($('#newcode').val());
w.document.close();
Whilst you can inject innerHTML into a pop-up's document.documentElement, if you do it that way you don't get the chance to set a <!DOCTYPE>, which means the page is stuck in nasty old Quirks Mode.
I have an iframe on a page that allows us to upload an image, once it's uploaded it displays the url of the file in a text input field.
On the main part of the page, we have our textarea where we write up our news posts. I'd like a way so that I can add a link on the iframe, next to the url field, that when clicked will automatically insert the text in there into the textarea on the main part of the page.
I'm relatively new to javascript, so I wasn't sure how to do this when using an iframe.
Thanks!
Main.htm
<html>
<head>
<script>
getText = function(s)
{
alert(s);
}
</script>
</head>
<body>
<iframe src="otherFrame.htm"></iframe>
</body>
</html>
otherFrame.htm
<html>
<head>
<script>
botherParent = function()
{
parent.getText(document.getElementById("textInput").value);
};
window.onload = function()
{
}
</script>
</head>
<body>
<input type="text" id="textInput" />
<span onclick="botherParent()">Stuff goes here</span>
</body>
</html>
Basically, in the child inline frame, use parent to access the parent's window object.
Global variables are stored in window, as are global functions. Because of this, if you define a global variable "foo" in parent, you can access it with parent.foo with your child frame.
Hope that helps!
Assuming I understand this correctly you want to be able to use javascript to access information in an iFrame from the container page. This is generally regarded as Cross Site Scripting and is not allowed.