Gewusst wie: hinzufügen von CSS-iframe-Inhalte

Warum dies nicht funktioniert Browsern außer dem IE?

var head = jQuery("#frame1").contents().find("head");
var css = '<style type="text/css">' +
      '.container{background:blue}; ' +
      '</style>';
jQuery(head).append(css);     
});
  • Was ist die Quelle der iframe? Ist es auf der gleichen domain?
InformationsquelleAutor Anoops | 2014-12-16
  1. 2

    Gehe ich davon aus, dass der iframe auf der gleichen domain, wie sonst wäre es ja nicht funktioniert im IE.

    Dein problem ist ein timing. Sie müssen warten, für den iframe zu laden, bevor Sie Sie anwenden können, Ihre Stile zu.

    Die Art und Weise Sie tun, ist:

    $('#frame1').load(function() { //Code to execute once iframe is loaded });

    Sobald wir wissen, dass es geladen wird, können wir alle Stile, also:

    var head = jQuery("#frame1").contents().find("head");
var css = '<style type="text/css">' + '.container{background:blue}; ' + '</style>';
$(head).append(css);

    Obwohl, man kann es verkürzen auf:

    $('#frame1').load(function() {
  var css = '<style type="text/css">.container{background:blue};</style>';
  $('#frame1').contents().find("head").append(css);
});

    Dieser funktioniert bei mir in Firefox und Chrome (auf einem server-stack - nicht vor Ort ist, aufgrund von Sicherheits-Beschränkungen).

    • Versuch seit 3 Stunden nun endlich funktioniert. Danke Jack
    InformationsquelleAutor James Hibbard
  2. -1

    JS:

    <script type="text/javascript">
jQuery(function ($) {
    	$('#mainFrame').load(function() {
    		$('#mainFrame').contents().find("head").append($("<link/>", {
    	    	    rel: "stylesheet",
    	    	    href: "${ctx}/css/exp.css",
    	    	    type: "text/css"
    	    }));
    	});
    });
</script>

    HTML:

    <iframe id="mainFrame" width="100%" height="auto"></iframe>

    InformationsquelleAutor Guangming Dong
Schreibe einen Kommentar