Intercept button click with jQuery from iframe to other iframe - javascript

I'm using wix to create simple landing page and would like to connect it with google analytics events.
I would like to intercept the event of pushing form send button.
Page example with form
The button id -> submitButton
Normally if i have full access to page code i use:
<script type="text/javascript">
$(document).ready(function () {
$('#buttonName').click(function () {
//google function
ga('send', 'event', 'EventCategory', 'EventCategory', 'EventName');
});
});
</script>
But here I can use only iFrame an internal plugin (hat generate code inside iframe).
PAGE STRUCTURE:
- Text, image ecc ecc;
- iFrame with form (managed by plugin, where i can't add/edit code);
- iFrame where i can add code. for example: example page
So I need to invoke click event of the button with id submitButton from an iframe which invokes the click of the button placed in other iframe (where the id is unknown).
is there a way to do that?
Thank you for response.

If you do not have access to the iFrame code you will not be able to put that tracking id the way you want.

If you're trying to intercept a click event within the iframe that you don't have control of, I'm pretty sure that's not possible for security reasons: otherwise it would be possible for an advert or any third party code on your page to intercept events on completely unrelated elements.
If you're trying to pass a click event from a bit you do control to a button that you don't, unless you know the ID of the button in the other iFrame you want to click, I don't think you're going to have much luck.

Related

How to listen to click API call in iframe?

I have an iframe in a modal and my code looks like this:
<Modal>
<iframe srcdoc={data.htmlString}></iframe>
<Modal>
In that Iframe I have 3D secure payment page and it works as needed. However I want to know how to listen if user clicked on "Submit" button in that iframe after entering the code and the API was called (inside Iframe)? Because according to the answer of the API I have to redirect the user to one or other page. Is is done with eventListener? Or which parameter I should listen with in useEffect?
I don't use classes, I use functions.

Javascript/JQuery prevent navigation totally inside an iFrame

I have a same domain page loaded inside an iframe (using sandbox attribute). I use the following code to prevent clicks (and all other elements) from navigating away form the page:
$('#preview_frame').contents().find('body *').off('click').click(
function(event){
event.stopPropagation();
event.preventDefault();
}
);
However it seems that other Javascript on the page is redirecting the navigation via window.location.href or window.location.replace.
I cannot change the code of the pages inside the iframe as they are proxied from other sites.
I tried using the iframe unload event without success.
I need to disable the ability to navigate inside the iframe no matter what/how it is done. I am not talking about top parent navigation which can be disabled with the sandbox attribute, I am talking about the navigation INSIDE the iframe itself.
Is it possible to accomplish that?
Your code seems correct. Remove the sandbox attribute if the page inside iframe is from same domain. Hope it will solve the problem.
Sandbox attribute always treats contents as unique origin.

How to open script in new tab

So when a user interacts with <script>
, I want to make it open in a new tab.
I tried doing this:
<script target="_blank"
but that didn't work. Help please!
EDIT: I'm sorry for not making myself that clear. I meant that when a user clicks on my bidvertiser ads, I want the ads to open on a new page. they are in script form so when the user clicks on the script, I want to open the script in a new page sort of like <a target="_blank>
I dont know if this is exactly what your looking for. But by the way you said the following:
"when a user interacts with script , I want to make it open in a new tab"
I assume you mean when the script is executed "after html page is rendered" you want a new tab to be created, if so then this code will work both inline with your html or in its own script file.
//pure js
document.addEventListener("DOMContentLoaded", function(event) {
window.open('http://www.google.com');
});
// jquery
$(function() {
window.open('http://www.google.com');
});
++++++++
Per your latest reply.
You could setup a click listener for the ads, i'd suggest maybe using a shared css class amongst the ads and in JQuery setup a click listener like such. Maybe using 'Inspect Element' you can find a class name that each ads has and use the code below to listen to the click.
$('.class-name').click(function () {
window.open('http://www.theurlfromad');
});

Auto-click button in div on-load

I have a page where I modded an app to prepopulate a number of fields. I would like to automatically have the 'submit' button be pressed/submitted when the page loads. I have tried things like:
<script type="text/javascript">
function autoclick() {
document.getElementById('buttonid').click();
}
</script>
with
<body onload="autoclick()">
But it does not work.
Any advice would be greatly appreciated!
Thanks
(It is the iframe on this site: http://abraxas.pw)
I see that your iframe is in the same domain and hence it will possible for you as the cross-domain security may not apply.
Give your iframe an id. And then:
document.getElementById('iframeName').contentWindow.document.getElementById("buttonid").click()
More info here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#Scripting
Make sure that the DOM is fully loaded before you fire your Javascript. Wrap this code into body load or iframe load.
Update:
If the iframe is in the same domain and is in your control, you don't need to do all this. Just fire the click from domloaded of jQuery, or place your code at the end (just before body ends). It will work.
Seeing your code, you have defined the function in the head and are calling it at body load. Place the function and the call at the end of the body.
You cannot do it in iframe for security reasons: http://pipwerks.com/2008/11/30/iframes-and-cross-domain-security-part-2/
Content coming from different domain in iframe can't be controlled in your page using javascript.
Browser treats iframe as a different window so you've no access over it. it's something like trying to access content of different window open in your browser from your own window(which is obviously not possible)

how to Trigger a submit button when Iframe url change

I use a third party iframe src, and I want to submit my form when the Iframe src change...
how to trigger the submit button when the inner Iframe source change?
how to trigger the submit button when the inner Iframe source change?
You can't access iframe content if it belongs to different domain.
I use a third party iframe src
So defenitly not as its other domain
Also from w3school
Note: Because of security reasons, the contents of a document can be accessed from another document only if the two documents are located in the same domain.
I changed the redirected page and add on it
<body onload="parent.parent.send()">
On the main page (where the iframe located) I add:
<script>
function send()
{
document.getElementById("gform_1").submit();
}
</script>
It solve my problem.

Categories