Using jQuery to modify the CSS of a div located outside of an iframe

Question

Using jQuery to modify the CSS of a div located outside of an iframe

Currently, I am developing a straightforward script.

Firstly, here is all of the code that I have:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
    function SuperWebF1() {
        $("#outerdiv").css({"border":"2px solid #e39f9f"});
        alert('SportsDirect.bg: Please specify your desired color first!');
    }
</script>
<div id="outerdiv">
    <iframe src="http://beta.sportsdirect.bg/checkout/onepage/" id="inneriframe" scrolling="no" target="_parent"></iframe>
</div>

The iframe contains this button:

<button type="button" class="button" onclick="parent.SuperWebF1();">Click me</button>

When the button within the iframe is clicked, I want to change the CSS of the div containing the iframe.

It's important to note that the jQuery code is invoked externally and before the iframe.

How can I achieve this functionality or what mistake am I making in my example?

javascript jquery html css iframe

Answer 1

Answer №1

When you try to retrieve the information stored in an iFrame that originates from a server outside of your own, it poses a security risk known as "cross-origin" and is strictly prohibited.

Answer 2

When you try to retrieve the information stored in an iFrame that originates from a server outside of your own, it poses a security risk known as "cross-origin" and is strictly prohibited.

Answer 3

Answer №2

If you have both the iframe and parent code accessible, the method below can be used in IE8 and newer versions:

Inside the Iframe:

<button type="button" class="button" onclick="parent.postMessage("button_clicked", "http://parent-domain.com");">Click Here</button>

In the Parent Code:

<script>
function CustomFunction1() 
{
    $("#outerdiv").css({"border":"2px solid #e39f9f"});
    alert('Please select your desired color first!');

}

// Create an event handler compatible with IE and other browsers
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

// Listen for messages from the child window
eventer(messageEvent,function(e) {
  if (e.data == "button_clicked") {
      CustomFunction1();
  }
},false);
</script>

Refer to https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage for security and other considerations.

Answer 4

If you have both the iframe and parent code accessible, the method below can be used in IE8 and newer versions:

Inside the Iframe:

<button type="button" class="button" onclick="parent.postMessage("button_clicked", "http://parent-domain.com");">Click Here</button>

In the Parent Code:

<script>
function CustomFunction1() 
{
    $("#outerdiv").css({"border":"2px solid #e39f9f"});
    alert('Please select your desired color first!');

}

// Create an event handler compatible with IE and other browsers
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

// Listen for messages from the child window
eventer(messageEvent,function(e) {
  if (e.data == "button_clicked") {
      CustomFunction1();
  }
},false);
</script>

Refer to https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage for security and other considerations.

Using jQuery to modify the CSS of a div located outside of an iframe

Answer №1

Answer №2

Similar questions

Combining two forms into one PHP page, but intending to submit only a single form

Having difficulty in displaying database values in HTML modal using PHP

Node.js application experiences a delay when calling Mongoose Model.save()

The CSS file is not appearing, causing the styling not to be applied

What is the best way to fulfill a promise after a CSV file has finished being read?

Error: Attempting to access the 'getProvider' property of an undefined variable

Utilizing Vue.js to add functionality for navigation buttons allowing users to move between survey questions

Endless scrolling with Ajax pagination: Issue with images not displaying when async is applied in the Ajax request

Looking to retrieve the mouse coordinates using JavaScript

My changes to the HTML file are not being reflected in the browser, even after clearing the cache. This is happening in an Angular and Node.js application

What is the process to set up a WebSocket on Tornado for a production server rather than on a local machine?

Arrange search results using $in array parameter in MongoDB

Iterate over an array in JavaScript and include the elements as parameters in an SQL query

Having trouble with Angular JS functionality

Executing a Firebase JavaScript script on a remote web server client

Displaying array data without the need for a loop in Vue.js and Axios

How to trigger a hover effect on a div and its child simultaneously using HTML and jQuery

Sending parameters in GraphQL with Typescript results in an empty set of curly braces being returned

Encountering difficulties obtaining server response while utilizing dropzone.js version 4

Reasons for the failure of file uploads from the React frontend to the backend system