Gunakan jQuery untuk menukar css pada kandungan iframe

3 Dalam jawatan ini, saya juga telah memasukkan beberapa dokumentasi percubaan yang gagal untuk cuba mengubah CSS kandungan iframed pada domain yang berbeza. Juga beberapa maklumat tentang cara menukar CSS dalam iframe pada domain yang sama, yang (sejauh yang saya tahu) tidak dapat dilakukan tanpa lulus proksi atau sebagainya.

Usaha Domain Cross

Bagaimana ia berfungsi:

berbanding url

hasil

Alasan

http://www.example.com/dir/page.html Kejayaan Protokol dan tuan rumah yang sama http://www.example.com/dir2/other.html Kejayaan Protokol dan tuan rumah yang sama http://www.example.com:81/dir/other.html Kegagalan Protokol dan tuan rumah yang sama tetapi pelabuhan yang berbeza https://www.example.com/dir/other.html Kegagalan Protokol yang berbeza http://en.example.com/dir/other.html Kegagalan Tuan rumah yang berbeza http://example.com/dir/other.html Kegagalan Tuan rumah yang berbeza (perlawanan tepat diperlukan) http://v2.www.example.com/dir/other.html Kegagalan Tuan rumah yang berbeza (perlawanan tepat diperlukan) Masukkan iframe: Kaedah ini tidak berfungsi untuk saya. Kaedah ini berfungsi untuk saya. Kaedah ini berfungsi untuk saya. var iframe = top.frames [name] .document; var css = " '

soalan yang sering ditanya mengenai menukar CSS dalam kandungan iframe

<span>Ways to to change CSS in an iframe
</span><span>Some of these work, and some don't but i've included both for you to ponder amd make up your own decisions.
</span>
<span><span>This</span> method didn't work for me.
</span><span>[js]
</span><span>var text = 'hi';
</span><span>var content = "" + text + "";
</span>
<span>var iframe = document.createElement("iframe");
</span>iframe<span>.src = ' document.body.appendChild(iframe);
</span>
<span>var doc = iframe.document;
</span><span>if(iframe.contentDocument)
</span>doc <span>= iframe.contentDocument; // For NS6
</span><span>else if(iframe.contentWindow)
</span>doc <span>= iframe.contentWindow.document; // For IE5.5 and IE6
</span><span>// Put the content in the iframe
</span>doc<span>.open();
</span>doc<span>.writeln(content);
</span>doc<span>.close();
</span>
doc<span>.getElementsByTagName("body").style.backgroundColor = 'red';</span>

Kenapa saya tidak boleh menukar CSS iframe dari domain yang berbeza? Ia menghalang skrip dari satu halaman mengakses atau mengubahsuai sifat halaman lain dari domain yang berbeza. Dasar ini dilaksanakan untuk mengelakkan skrip yang berpotensi berniat jahat daripada mengakses data sensitif di laman web lain. Walau bagaimanapun, jika anda mempunyai kawalan ke atas halaman sumber iframe, anda boleh menambah skrip di sana untuk menerima mesej dari halaman induk dan membuat perubahan yang diperlukan. Berikut adalah contoh mudah:

<span>var cssLink = document.createElement("link")
</span>cssLink<span>.href = "style.css";
</span>cssLink <span>.rel = "stylesheet";
</span>cssLink <span>.type = "text/css";
</span>frames<span>['frame1'].document.body.appendChild(cssLink);</span>

$ ("#myiframe"). Kandungan (). Cari ("badan"). CSS ("latar belakang warna", "merah");

Bolehkah saya menggunakan javascript dan bukannya jQuery untuk menukar css iframe?

Ya, anda boleh menggunakan javascript biasa untuk menukar css iframe. Begini cara anda boleh melakukannya:
var iframe = document.getElementById ('myifRame');
var iframedoc = iframe.contentdocument || iframe.contentwindow.document; Ini juga akan mengubah warna latar belakang badan iframe menjadi merah. IFRAME mungkin dari domain yang berbeza, di mana anda tidak dapat mengubah suai CSS kerana dasar asal yang sama. Atau, kandungan iframe mungkin tidak dimuatkan sepenuhnya apabila anda cuba menukar CSS. Untuk memastikan iframe dimuatkan sepenuhnya, anda boleh menggunakan peristiwa beban. Perubahan yang diperlukan. Berikut adalah cara anda boleh melakukannya dengan jQuery:
$ ("#myiframe"). Pada ("beban", fungsi () {

$ (ini) .contents ().

Bolehkah saya menukar CSS kandungan iframe jika ia adalah PDF? CSS adalah bahasa gaya yang digunakan untuk menerangkan rupa dan pemformatan dokumen yang ditulis dalam HTML atau XML. Fail PDF mempunyai pemformatan sendiri dan tidak boleh digayakan dengan CSS. Berikut adalah cara anda boleh melakukannya:

iframe { lebar: 500px;

ketinggian: 300px;

}

Ini akan mengubah lebar dan ketinggian iframe ke 500px dan 300px Keluarkan sempadan iframe. Begini cara anda boleh melakukannya:

iframe { sempadan: none;

}

Ini akan menghapuskan sempadan iframe.

Atas ialah kandungan terperinci Gunakan jQuery untuk menukar css pada kandungan iframe. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!