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.
Related
I require to find the DOM element which is adding inside of a iframe, with the iframe added. for determine to find the element added, I am using this plugin
all i doing from chrome ext.
arrive.js
body>iframe1>iframe.ssueContentIframe2>#SmartReportTabContent1>loopElements>link
like this:
document.arrive(".ssueContentIframe", function() {
console.log('.ssueContentIframe arrived', this);//works
this.arrive('#SmartReportTabContent1', function(){
console.log('arrive 2');//not working
});
});
what is wrong here? any one help me please?
To check for an element within an iframe you need to include the arrive.js library and your script that calls the arrive() function within the iframe.
If you just want to detect whether iframe is loaded there's other solutions, but if you want to muck around in the iframe you have to keep in mind cross-domain policies.
Javascript has a Same-Origin policy in which javascript on the outer page cannot access the contentWindow or DOM (or global state) of the iframe page if it does not share the Same-Origin
-- T. Stone
Seems to me arrive.js isn't the problem, it's trying to mess with an iframe.
I have jQuery on my main page and would like to clone/copy the main page version of it inside my iframe, so that I can extend that version with specific plugins that are not relevant on the main page.
How can accomplish do this?
No. That's is not cloning process. You require to put the code for your iframe elements separately or in combined logics.
You cannot clone the function for another scope.
Just insert a <script> tag for jquery in the head of the iframe's document. That will provoke the iframe into loading jQuery.
Don't forget that you have to use the jQuery constructor that takes a 2nd parameter specifying the htmlDocument when you create an element in a different document and when you do element queries in a different document.
Here is an example jsfiddle that puts the main document jquery into an iframe.
CORS applies here, if the iframe is not in the same document, it will not let you "reach into" the iframe. If you control the page, you can use postMessage to get around the security barrier.
I have an jsp(1.jsp) page which has an another jsp page(2.jsp) as an Iframe. Now if i want to get the value of Iframe in Java script of 2.jsp i am getting null. can any one please tell me how can I get the value of the Iframe in the 2.jsp.
If the iframe src is of the same domain/subdomain of the parent (i.e. www.website.com or simply my.ip.address.here (same port)), you can retrieve the contents of the iframe via jQuery's $('#amr iframe').contents().
Alternatively you can use pure javascript via myIframeElement.contentWindow.document (and then, for example, getElementById like you'd normally do with window)
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
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.