JavaScript variable in text input value - javascript

I have a main html page which has a text input field and iframe in it .
I would like to be able to click a link in the iframe and and have the input text box value change to the value of a variable called selectedText.
Im not sure how to get it to work . I have been able to get it to work only from the main page by using this :
newListNote.value = selectedText;

As you cannot set the textbox value of parent page from iframe directly,
create a javascript function in your main page like this,
function setValue(val) {
document.getElementById('newListNote').value = val;
}
And call this function from the iframe page like this,
parent.setValue(selectedText);
I consider your textbox has id newListNote. Hope it works, thanks.

I think this one is related to Same-Origin Policy and Cross Site Script policy. You can't achieve it (correct me if i'm wrong).

Assuming your using jQuery as you tagged it and the iframe is another page within your site, it would be better to use .load()
$( "#result" ).load( "ajax/test.html" );
This then loads the page into your document where you can access the links. Then you can achieve your original goal. If the page is external to your site i'm not sure that this would work.
Good luck

A combination of the two answers here by #balaG and #Gereltod are correct.
As #Gereltod suggested, you cannot run JavaScript within an iframe from outside the iframe. If you could, then there would be serious security problems with the internet!
As #BalaG suggested, if you want the website to change based upon an event within the iframe, you need to write code within the iframe, and prepend it with parent.

Related

Run textarea to iframe

I'm trying to run an HTML, CSS and JavaScript code written by the user in a textarea on an iframe in the page, something like jsFiddle. I tried using this for the HTML and CSS:
$(".runBtn").on("click", function(){
$(".Result > iframe").contents().find('body').html("<style>" + $('.CSS > textarea').val() + '</style>' + $(".HTML > textarea").val());})
But it doesn't seem to work. And I still haven't got a clue on how to run the javascript on it.
Comunication with iframe is tricky and You should not be using it like that. There is API for communication with iframe no mater it is from site to iframe or iframe to site. I didn't use it for a long time so i can't give you some good examples but You have everything You need on 1
it goes down to that you send a message trough that API to iframe with some payload, and inside of him You have event listener to that message event. when you receive it, render html from payload.
$("runBtn") is looking for a elements that are a tag <runBtn> that most likely doesn't exist. If element has an id you need a proper id prefix
$("#runBtn")
As for your html you haven't created a proper <style> tag. Also not clear where the textarea is in relation to iframe (inside iframe or outside). If it is inside you need to use find() within iframe contents to access it

How to edit form in iframe

Hi i have a form i used jquery to give a value to submit button, it is working fine.
jQuery('#frm_f_container.with_frm_style .submit input[type="submit"]').val('');
Now the form code is placed inside the wp super pop up pro. It is a pop up plugin it contains iframe when i inspect with firebug
The same jquery is not working so i tried contents() as suggested for iframe but this too not setting the button value here is the code i tried
jQuery('.sppro_cboxIframe').contents().find('#frm_f_container.with_frm_style .submit input[type="submit"]').val('');
Here .sppro_cboxIframe is the class placed with iframe like this
<iframe class="sppro_cboxIframe" frameborder="0" name="sppro_cbox1381566909072" src='url'>
when i view the source i can't able to see iframe like the above.
Now how to change or add values to the form inside it. Any help would be thankful.
You won't be able to manipulate elements inside the iframe from outside the iframe with javascript. See this answer regarding same origin policy:
jQuery/JavaScript: accessing contents of an iframe
Check to see if that plugin allows you to pass in your jQuery into the iframe. That's the only way you'll get to manipulate the elements inside the iframe.
Assuming jQuery defined as $ inside the <iframe>, passing same origin, and that the page inside the <iframe> has started loading, you can get the Window reference of an HTMLIFrameElement via it's contentWindow property.
// get the <iframe> and then it's contentWindow
var iWin = document.getElementsByClassName('sppro_cboxIframe')[0].contentWindow;
// now to use jQuery inside <iframe>
iWin.$.find('#frm_f_container.with_frm_style .submit input[type="submit"]').val('');
Your code is fine, here is the demo: http://jsfiddle.net/T86yw/
jQuery('.sppro_cboxIframe').contents().find('#frm_f_container.with_frm_style .submit input[type="submit"]').val('New Value');
The issue is somewhere else. As you say both pages have the same origin, another thing to check is whether the iframe is already loaded when you run the code.

recognizing actions on an iframe

So I have an iframe, and I would like to be able to do something like an alert whenever a specific button in the iframe is clicked. But the following code does not work
$('.class_name').click(function(){
alert('Clicked');
});
in fact, it wont even alert when the iframe is clicked (which is the same code as above, but where .class_name becomes iframe).
I looked at the solution from this question, and it still did not work!
This is a jsfiddle that should demonstrate the issue pretty well.
So my question is: Why wont Jquery recognize when anything inside the iframe, as well as the actual iframe, is clicked?
Edit:
I understand that I cannot communicate with an iframe on a different domain, so my jsfiddle wont work...but it doesn't work on the site where I am hosting it on the same domain as the iframe...
If your iframe is coming from a different domain, as in your fiddle, then your JavaScript code has no access to its contents at all, sorry!
As #Max poins out, you can use postMessage() or the URL fragment hack to communicate with an iframe in a different domain, if there is code in that iframe to handle this communication from that side.
With an iframe from tumblr.com, you could check their documentation to see if it talks about using this page in an iframe and communicating with it across the domain barrier.
Now if you're talking about an iframe from the same domain as your page, then it's easy. Given an iframe element in a variable named myframe, you can use myframe.contentWindow to get its window object and myframe.contentWindow.document to get its document object. From there you can do the things you need. For example:
var $myframe = $('#myframe'),
myframe = $myframe[0],
myframewin = myframe.contentWindow,
myframedoc = myframewin.document;
$(myframedoc).find('a').on( 'click', function() {
alert( 'Clicked!' );
});
You may still have some trouble using a copy of jQuery in the main page to access things in the iframe, but should have better luck with the latest versions. Worst case you can use native DOM events and methods for this, but jQuery does work in this updated fiddle.
This fiddle uses document.write to put content in the iframe, but the jQuery code accessing the frame would be the same either way. The one thing to watch out for, of course, is whether the iframe has been completely loaded when you try to access it.
I think you can listen for a load event on the iframe element in the containing page, but worst case you could use setTimeout() or setInterval() and wait for the elements you're looking for to become available.
Because the iFrame is a completely different frame- it's done out of security concerns. For example, imagine if you could load a banks login page in an iFrame, and use js to get the field values.
With different domains especially, it is much harder to communicate with JS- this should get you started: How to communicate between iframe and the parent site?

Get current location/url of iframe and assign into a variable

I have some content hosted on my own servers which I'm displaying to the user dynamically. However the content is a few layers deep and I need the url/location of the iframe so I can assign it to a link.
The result should be when a user clicks on the link, it takes them to the page with the iframe as well as displaying the proper page/layer within the iframe.
How do I achieve this via javascript or jquery? Or is xpath also required for this? If you disagree, please don't downvote this question but explain why I shouldn't post it since too many downvotes and you get banned.
Thanks!
Try to use jquery for this, like:
$(document).ready(function(){
$("#iframeid").load(function(){
alert(this.contentWindow.location);// do what you want with this location
});
});
Note: First add a latest version of jquery

how to extract the value of a field in an iframe into the main page

I have an iframe inserted into my main page.
The iframe generates a value which is of the type hidden
I need to extract this value into my main page using a javascript
Can someone please help me with this?
If the page that you load in the iframe is in the same domain of your main page, you can access the DOM of that page with:
window.frames[iframeName].document
and than it's very easy to get the value of any element.
You can access the contents of the iframe from the parent page the following way:
var iframe = document.getElementById("iframeId");
var field = iframe.contentWindow.document.getElementById("hiddenFieldId");
I didn't test it and it's been a while since I've used raw DOM in JavaScript so let me know if it does not work.
If the url of the iframe is to a different domain then you might need to make sure the domain of the document in the iframe is the same as the domain of the containing document.
Run this code in both documents before trying to read the values of the field:
document.domain = "example.com";
If the content of the iframe belongs to a different site than yours, then you do not have access to it with javascript. This is a security measure.
Use this
fram.document.getElementById("name").value
Sure it will work
Details :
fram = id given to the frame
name = id given to the text box inside the frame
If your page and the iframe content come from different domains, this will be quite tricky. I was recently forced to find a workaround for this and managed pull it off with an AJAX call to a PHP script utilizing file_get_contents() but it is not very copyright compliant or secure...

Categories