CODEWITHSUNDEEP
javascript
ThomasES
ThomasES

Reputation: 1

Modify a window that will be opened

I would like to open a window when I click on a button and modify the html and css of the page that will be open. How can I do this?

I work on a symfony project and I just want to write on a paragraph of the window that will be opened. So for this I tried: 

$( "#tom" ).click(function() { 
  var wind = window.open("{{ path('AjoutFournisseur') }}", "Ajouter un fournisseur", "width=520,height=1080");
  wind.document.getElementById("can").innerHTML='TEST'; 
});

And I have this error:

Uncaught TypeError: Cannot set property 'innerHTML' of null at HTMLSpanElement. (add-volet:113) at HTMLSpanElement.dispatch (jquery.min.js:2) at HTMLSpanElement.y.handle (jquery.min.js:2)

Upvotes: 0

Views: 99

Answers (1)

Daniel Beck
Daniel Beck

Reputation: 21475

If the popup window is not on the same domain as the parent window, this will not be possible without cooperation from the other site (CORS rules and the same-origin policy will apply).

If both pages are on the same domain, the change you need to make is to wait for the popup window to finish loading before trying to modify it; right now you're opening the window and then immediately trying to change its contents before the network request has had a chance to return them.

I can't demonstrate this within a functioning stack overflow snippet, because it won't allow popup windows, but this is what it would look like:

$('#tom').on("click", function() {
  let thePopup = window.open("url_of_popup_window.html");
  thePopup.onload = function(e) {
    thePopup.document.getElementById("can").innerHTML = 'TEST';
    // Or, since you're already using jQuery, use this equivalent to the above line:
    // $('#can', e.target).html('TEST'); // e.target is the popup document here
    // (this would be usable even if jQuery is not in the popup window, because this script runs in the parent)
  }
});

Upvotes: 1

Related Questions