Iframe inherit from parent

by

You can “inherit” the CSS of the parent by having such code in the iframe:

<head>
<script type="text/javascript">
window.onload = function() {
    if (parent) {
        var oHead = document.getElementsByTagName("head")[0];
        var arrStyleSheets = parent.document.getElementsByTagName("style");
        for (var i = 0; i < arrStyleSheets.length; i++)
            oHead.appendChild(arrStyleSheets[i].cloneNode(true));
    }
}
</script>
</head>

Worked fine for me in IE, Chrome and Firefox.

Regarding JavaScript,
I couldn’t find a way to add the parent JavaScript into the iframe directly, however you can add parent. anywhere to use the JS from within the parent, for example:

<button type="button" onclick="parent.MyFunc();">Click please</button>

This will invoke function called MyFunc defined in the parent page when the button is clicked.

More Related Contents:

  1. When we using alert vs popup div tag? [closed]
  2. How to hide css and js version details from weppalyzer in PHP
  3. CSS Propertie change OnClick [closed]
  4. My website doesn’t load jQuery [closed]
  5. How to make page loaders/animations/transitions
  6. Download the text over image using jquery
  7. Replacing css file on the fly (and apply the new style to the page)
  8. Dynamically loading css stylesheet doesn’t work on IE
  9. How to silently hide “Image not found” icon when src source image is not found
  10. How to close an open collapsed navbar when clicking outside of the navbar element in Bootstrap 3?
  11. How to show popup message like in Stack Overflow
  12. Use images like checkboxes
  13. How can I detect whether an iframe is loaded?
  14. Setting CSS value limits of the window scrolling animation
  15. How can I generate the opposite color according to current color?
  16. Detect click event inside iframe
  17. scrollTop animation without jquery [duplicate]
  18. How to swipe top down JQuery mobile
  19. Scale element proportional to Background Cover with jQuery
  20. jQuery: Slide left and slide right
  21. Bootstrap Dropdown with Hover
  22. Insert content into iFrame
  23. Resize external website content to fit iFrame width
  24. jQuery, image changing on hover [duplicate]
  25. How to increase width of underline for the multiline text when on hover
  26. jQuery Popup Bubble/Tooltip [closed]
  27. How do I make a div full screen?
  28. How to customize the position of an alert box
  29. Showing Placeholder text for password field in IE
  30. Possible to reverse a css animation on class removal?

Leave a Comment