I am populating an iframe with the following content
<iframe sandbox="allow-same-origin allow-scripts" srcdoc="<!DOCTYPE html><html><head></head><body><div class="frame-root"></div></body></html>">
<html><head></head><body><div class="frame-root"><div class="frame-content"><div>
<script>
function parentGreet() {
console.log("parent greet")
window.parent.window['go']['main']['App']['Greet']("some name to greet").then(result => {
console.log(result)
})
}
</script>
<button onclick="parent.testingFromIframe('some data');">Call Parent Window Function</button>
</div></div></div></body></html>
</iframe>
In the parent index.html, I have
<script>
function testingFromIframe(greetee) {
window.parent.window['go']['main']['App']['Greet'](greetee).then(result => {
console.log(result)
})
}
</script>
so when I call this function testingFromIframe from the button onclick it works and the console.log(appears correctly).
However when i call parentGreet which is a function inside the iframe it does not work and says that the variable parentGreet doesn't exist.
One clue I can see is when I select the parentGreet function in the inspector it says that its a text node, which i feel suggests its not seeing it as javascript.
I have a bunch of functions attached to the parent window that I want to expose to the iframe. The only issue with the button onclick approach is receiving a response within the iframe and doing something with it.
I am in control of the content in the iframe, so if any one can point me in the direction of the best way to do this I would be very grateful - for instance, perhaps when the parent populates the content of the iframe, it could pass functions in to the iframe that became available to the iframe content or something.
Thanks
Related
My child.html have a button which could click using script $('[value="Submit"]').click();
I want to invoke this from parent.html
Something like this:
var popUp = window.open('https://child.html');
popUp.$('[value="Submit"]').click(); //this line should be fixed
How could do this?
You should use window.postMessage API. Here is example code.
child.html
function functionToBeExecuted(event)
{
// do click or whatever you want
}
window.addEventListener("message", functionToBeExecuted, false);
parent.html
let child = window.open('child.html');
child.postMessage(); // notice that I did not pass message argument, since you just want to trigger the function, but if you want to pass some data to function using event parameter, just pass data to this function (for example string or object etc.)
I went in a similar kind of issue where I had iframe(containing child html) inside my parent html.
I solved this $(".DivClass iframe").contents().find("button").trigger('click');
In your case its pop window I don't no which popup you are using: custom pop or browser pop.
You can Add iframe inside your popup to achieve this issue using the same code as what I did.
Condition is that popup should be custom html popup not the other popup which is provided by browser provide.
Use this code in parent.html to click button:
let child = window.open('child.html');
let doClick = () => child.document.getElementById('my-button').click();
child.addEventListener('load', doClick(), true);
This is what you want... But my suggestion is to make function on child and use window.postMessage API to trigger it...
I have a web page loading a iframe (inside a modal Fancybox) and this iframe contains a form with 2 pages.
I want this iframe content to ask the parent to trig a function (so the modal can be resized when the 2nd page of the form is shown)
$.fancybox.update();
When executed in the iframe, it doesn't work because it needs to be in parent context. So far, I managed to do it with binding a click on the "next page" button inside the iFrame.
$('body iframe').contents().find('.goToPage2').bind('click', function (e) {
$.fancybox.update();
});
This was working.
But now, I have to do it without waiting for a click (it has to happen after getting an ajax response). So I tried to bind a "show" action, and make a div appear with after(), but it didn't work.
$('body iframe').contents().find('#page2').bind('show', function (e) {
$.fancybox.update();
});
I also tried to reach the parent directly from the iframe but with no luck in my case (fancybox) :
$('#page2', window.parent.document).fancybox.update();
If anyone can explain how I can achieve this, I will be grateful :-)
hopefully i'm asking this right..
Here's my situation:
I have html running inside an iframe that makes a controller call to get back a view with a javascript file referenced in it..
so..
main page:
<html>
<body>
<iframe src="page2.html" />
</body>
</html>
page2.html:
<html>
<body>
<script>
$.ajax({
url: "controller\myview",
type: "POST",
data: null,
dataType: "html"
}).done(function(view) {
var body = $(window.top.document.body);
body.append(view);
});
</script>
</body>
</html>
myview sends back a typical but has a tag at the bottom of it that creates a dialog of the form. the whole point here is to get the jquery ui dialog outside of the iframe, which when i inspect the DOM it's outside the iframe; however, when the javascript that is now in the mainpage executes it seems to think it's till in the iframe.
it looks like i have a scope problem but i don't know how to get around it. i had hoped if i put the script tag in the mainpage it would scope itself outside the iframe, i even tried moving the scope file to the head tag with no luck..
any suggestions?
How come you have an iFrame of a page that does an ajax call to controller/myview when you can do the ajax call in your main page instead? If you make the ajax call in your main html page, you can handle it in it's own scope which should eliminate the whole scope issue and also get rid of the redundant iFrame while you're at it. Sorry if I'm misinterpreting your question, it is a bit confusing.
Is window.top... really taking you to the parent?
See How to access parent Iframe from javascript and JavaScript dynamically loaded into iframe runs in parent scope for more comments/code.
Also remember that you cannot get data from the iframe to the parent - if you could you would have a way to register mybank.cn and have it load mybank.com in an iframe taking all space and then eavesdrop on the mybank.com in the iframe.
Yes, I have seen this question, but I am still finding myself confused:
How to Call JavaScript From Main Window
I want to call a function that toggles an object with jQuery on the parent frame from an iframe. How exactly would something be done?
window.parent.[...?]
In main window:
function toggleMe() {
$('#myid').toggle();
}
In child frame:
window.parent.toggleMe();
I'm trying to change text on a page from an iframe on the page. When the user finishes uploading an image I want to change text saying loading... to finished uploading or something. Can this be done from an iFrame? I know when you use alert("Finished"); it alerts the user from the iframe, but I still have the loading text.
Try using window.parent from within the iframe. This will point to the parent window.
You could execute a function (named, say, hideLoadingText) within the context of the parent window by doing window.parent.hideLoadingText();
on parent.html page (where there is an iframe)
function finished()
{
//you can change this below line depend on your needs
document.getElementById("status").innerHTML="Finish";
}
<span id="status"></span>
<iframe src="child.html" name="iframe_content"></iframe>
then you can try this on child.html page (content inside the iframe)
<input type="button" value="Finish" onclick="parent.finished()" />
also you can change the triger of the function depend on your needs
window.parent.yourjavascriptmethodname();