Dalam dunia pengembangan web, iFrame (inline frame) merupakan salah satu elemen yang paling fleksibel dan berguna, memungkinkan kita untuk menanamkan konten dari sumber eksternal ke dalam halaman web kita.
Namun, tahukah Anda bahwa iFrame dapat diatur untuk menampilkan konten yang berbeda setiap kali halaman di-refresh? Artikel ini akan memandu Anda melalui langkah-langkah membuat iFrame yang kontennya berubah setiap kali halaman di-refresh.
Mengapa iFrame Dinamis?
Sebelum kita menyelami teknis pembuatannya, mari kita pahami mengapa Anda mungkin memerlukan iFrame yang dinamis. Ini berguna untuk menampilkan konten yang sering berubah, seperti iklan yang berbeda atau berita terbaru, membuat website Anda lebih interaktif dan menarik.
Dasar HTML dan JavaScript
Membuat iFrame yang dinamis memerlukan pemahaman dasar tentang HTML dan JavaScript. iFrame ditambahkan ke halaman web menggunakan tag <iframe>, dan JavaScript digunakan untuk memperbarui atribut ‘src’ (sumber) dari iFrame tersebut.
Langkah-langkah Pembuatan iFrame
1. Menyiapkan Array URL
Pertama, buat array dalam JavaScript yang berisi URL-URL yang ingin Anda tampilkan dalam iFrame.
2. Fungsi Pemilihan URL Secara Acak
Kemudian, tulis fungsi JavaScript yang memilih salah satu URL dari array tersebut secara acak.
3. Mengubah Atribut ‘src’ pada iFrame
Dengan menggunakan DOM manipulation, ubah atribut ‘src’ dari iFrame Anda dengan URL yang dipilih secara acak tersebut.
4. Event Handler untuk Refresh
Pastikan fungsi ini dijalankan setiap kali halaman di-refresh, yang bisa Anda lakukan dengan meletakkannya di dalam event handler window.onload atau menggunakan jQuery $(document).ready().
Contoh Kode
Berikut adalah contoh kode skrip dari beberapa sosial media :
-
Facebook
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Facebook</title>
<style>
.facebook-responsive-iframe {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* Rasio aspek video 16:9 */
}
.facebook-responsive-iframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="facebook-responsive-iframe">
<iframe id="facebook-video-iframe" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
</div>
<script>
// Daftar URL video Facebook
const videoUrls = [
"https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fweb.facebook.com%2FIDVolunoid%2Fvideos%2F1458885431320186%2F&width=500&show_text=false&height=280&appId",
"https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fweb.facebook.com%2FIDVolunoid%2Fvideos%2F825374975724511%2F&width=500&show_text=false&height=280&appId",
"https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fweb.facebook.com%2FIDVolunoid%2Fvideos%2F967888574499335%2F&width=500&show_text=false&height=280&appId",
"https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fweb.facebook.com%2FIDVolunoid%2Fvideos%2F1326954977898988%2F&width=500&show_text=false&height=280&appId",
"https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fweb.facebook.com%2FIDVolunoid%2Fvideos%2F1333954203899708%2F&width=500&show_text=false&height=280&appId",
"https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fweb.facebook.com%2FIDVolunoid%2Fvideos%2F688920072752983%2F&width=500&show_text=false&height=280&appId",
"https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fweb.facebook.com%2FIDVolunoid%2Fvideos%2F283048721171894%2F&width=500&show_text=false&height=280&appId",
"https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fweb.facebook.com%2FIDVolunoid%2Fvideos%2F283048721171894%2F&width=500&show_text=false&height=280&appId",
"https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fweb.facebook.com%2FIDVolunoid%2Fvideos%2F337450558855410%2F&width=500&show_text=false&height=280&appId",
"https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fweb.facebook.com%2FIDVolunoid%2Fvideos%2F322691996884456%2F&width=500&show_text=false&height=280&appId",
"https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fweb.facebook.com%2FIDVolunoid%2Fvideos%2F274763655420415%2F&width=500&show_text=false&height=280&appId",
"https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fweb.facebook.com%2FIDVolunoid%2Fvideos%2F1470258877159795%2F&width=500&show_text=false&height=280&appId",
"https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fweb.facebook.com%2FIDVolunoid%2Fvideos%2F1993983764308566%2F&width=500&show_text=false&height=280&appId",
"https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fweb.facebook.com%2FIDVolunoid%2Fvideos%2F971477384085734%2F&width=500&show_text=false&height=280&appId",
"https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fweb.facebook.com%2FIDVolunoid%2Fvideos%2F826223335610895%2F&width=500&show_text=false&height=280&appId",
"https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fweb.facebook.com%2FIDVolunoid%2Fvideos%2F615959667406246%2F&width=500&show_text=false&height=280&appId",
"https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fweb.facebook.com%2FIDVolunoid%2Fvideos%2F329557332769008%2F&width=500&show_text=false&height=280&appId",
"https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fweb.facebook.com%2FIDVolunoid%2Fvideos%2F280932181382199%2F&width=500&show_text=false&height=280&appId",
"https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fweb.facebook.com%2FIDVolunoid%2Fvideos%2F3466678976995746%2F&width=500&show_text=false&height=280&appId"
];
// Fungsi untuk memilih secara acak URL video dari daftar
function getRandomVideoUrl() {
const randomIndex = Math.floor(Math.random() * videoUrls.length);
return videoUrls[randomIndex];
}
// Memperbarui src iframe dengan URL video secara acak saat halaman dimuat ulang
const iframe = document.getElementById('facebook-video-iframe');
iframe.src = getRandomVideoUrl();
</script>
</body>
</html>-
Twitter
<!DOCTYPE html>
<html>
<head>
<title>Twitter</title>
</head>
<body>
<!-- Tempatkan elemen HTML untuk menampilkan tweet di sini -->
<div id="twitter-tweet"></div>
<script>
// Daftar URL Twitter yang ingin Anda tampilkan secara acak
var twitterUrls = [
"https://twitter.com/volunoid/status/1701815548139692109",
"https://twitter.com/volunoid/status/1701816339868811716",
"https://twitter.com/volunoid/status/1701816911628316878",
"https://twitter.com/volunoid/status/1701817401958973811",
"https://twitter.com/volunoid/status/1701817861482958939",
"https://twitter.com/volunoid/status/1701818224483172675",
"https://twitter.com/volunoid/status/1701818617002946772",
"https://twitter.com/volunoid/status/1701819067127243136",
"https://twitter.com/volunoid/status/1701841128667099525",
"https://twitter.com/volunoid/status/1701842075128598989",
"https://twitter.com/volunoid/status/1701847354008355166",
"https://twitter.com/volunoid/status/1701851680307122202",
"https://twitter.com/volunoid/status/1701855771179556967",
"https://twitter.com/volunoid/status/1701856935119904867",
"https://twitter.com/volunoid/status/1701859929056063852",
"https://twitter.com/volunoid/status/1701860987270549979",
"https://twitter.com/volunoid/status/1701861937498513549",
"https://twitter.com/volunoid/status/1701865527927554476",
"https://twitter.com/volunoid/status/1701867907116855348"
];
// Pilih URL secara acak dari daftar
var randomUrl = twitterUrls[Math.floor(Math.random() * twitterUrls.length)];
// Setel tautan tweet acak
document.getElementById("twitter-tweet").innerHTML = '<blockquote class="twitter-tweet" data-lang="en"><a href="' + randomUrl + '"></a></blockquote>';
// Muat ulang widget Twitter
if (window.twttr) {
twttr.widgets.load();
}
</script>
<!-- Masukkan script Twitter widget jika belum dimuat -->
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</body>
</html>-
Instagram
<!DOCTYPE html>
<html>
<head>
<title>Instagram</title>
</head>
<body>
<div id="randomIframe"></div>
<script>
// Daftar URL postingan Instagram yang akan digunakan secara acak
var instagramURLs = [
"https://www.instagram.com/p/CxFOdc9SZ1N/",
"https://www.instagram.com/p/CxNPh8URf3q/",
"https://www.instagram.com/p/CxNP_AIxj9W/",
"https://www.instagram.com/p/CxNQh7tRU38/",
"https://www.instagram.com/p/CxNQytHRm2U/",
"https://www.instagram.com/p/CxNRtoHxe2R/",
"https://www.instagram.com/p/CxNSnVPxgOv/",
"https://www.instagram.com/p/CxNUJokR3Ng/",
"https://www.instagram.com/p/CxPDcmqBbsg/",
"https://www.instagram.com/p/CxPFn1Fx0Wf/",
"https://www.instagram.com/p/CxPGb2CxelY/",
"https://www.instagram.com/p/CxPHc-TxqED/",
"https://www.instagram.com/p/CxPNfk5RszC/",
"https://www.instagram.com/p/CxPORNIRQD0/",
"https://www.instagram.com/p/CxPPqCxROv4/",
"https://www.instagram.com/p/CxPR8PcxfKq/",
"https://www.instagram.com/p/CxPVHRxxQGv/",
"https://www.instagram.com/p/CxPVyHERrFK/",
"https://www.instagram.com/p/CxPWHsURkjp/"
];
// Fungsi untuk menampilkan postingan Instagram secara acak
function displayRandomInstagramPost() {
var randomIndex = Math.floor(Math.random() * instagramURLs.length);
var randomURL = instagramURLs[randomIndex];
var embedCode = '<blockquote class="instagram-media"><a href="' + randomURL + '"></a></blockquote>';
document.getElementById("randomIframe").innerHTML = embedCode;
// Muat ulang script Instagram Embed setelah mengubah konten
if (window.instgrm) {
window.instgrm.Embeds.process();
}
}
// Memanggil fungsi ketika halaman dimuat
window.addEventListener("load", displayRandomInstagramPost);
</script>
<script async src="https://www.instagram.com/embed.js"></script>
</body>
</html>-
LinkedIn
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LinkedIn</title>
<script>
function loadRandomLinkedInContent() {
// Daftar URL konten LinkedIn Anda dalam format embed
var linkedInURLs = [
'https://www.linkedin.com/embed/feed/update/urn:li:activity:7107231445240156160',
'https://www.linkedin.com/embed/feed/update/urn:li:activity:7108273717276798976',
'https://www.linkedin.com/embed/feed/update/urn:li:activity:7108277318069981184',
'https://www.linkedin.com/embed/feed/update/urn:li:ugcPost:7108285845878558720/',
'https://www.linkedin.com/embed/feed/update/urn:li:ugcPost:7108287163171028992/',
'https://www.linkedin.com/embed/feed/update/urn:li:ugcPost:7108288403426742272/',
'https://www.linkedin.com/embed/feed/update/urn:li:ugcPost:7108289012510949376/',
'https://www.linkedin.com/embed/feed/update/urn:li:ugcPost:7108291796547366912/',
'https://www.linkedin.com/embed/feed/update/urn:li:ugcPost:7108300897964724225/',
'https://www.linkedin.com/embed/feed/update/urn:li:ugcPost:7108303652351606784/',
'https://www.linkedin.com/embed/feed/update/urn:li:ugcPost:7108305677734838272/',
'https://www.linkedin.com/embed/feed/update/urn:li:ugcPost:7108306475302748162/',
'https://www.linkedin.com/embed/feed/update/urn:li:ugcPost:7108307941916606464/',
'https://www.linkedin.com/embed/feed/update/urn:li:ugcPost:7108312143795535872/',
'https://www.linkedin.com/embed/feed/update/urn:li:ugcPost:7108329099667935233/',
'https://www.linkedin.com/embed/feed/update/urn:li:ugcPost:7108334174771580929/',
'https://www.linkedin.com/embed/feed/update/urn:li:ugcPost:7108336711209783296/',
'https://www.linkedin.com/embed/feed/update/urn:li:ugcPost:7108342515157647360/',
'https://www.linkedin.com/embed/feed/update/urn:li:ugcPost:7108343513414565889/'
];
// Pilih URL secara acak
var randomURL = linkedInURLs[Math.floor(Math.random() * linkedInURLs.length)];
// Pasang URL ke dalam iFrame
document.getElementById('linkedinIframe').src = randomURL;
}
</script>
</head>
<body onload="loadRandomLinkedInContent()">
<iframe id="linkedinIframe" width="500" height="500" frameborder="0"></iframe>
</body>
</html>-
Tiktok
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TikTok</title>
</head>
<body>
<div id="kontainer-embed-tiktok">
<!-- iFrame TikTok akan disematkan di sini -->
</div>
<script>
// Daftar tautan video TikTok
var tautanTikTok = [
"https://www.tiktok.com/@volunoid/video/7278564451127774466",
"https://www.tiktok.com/@volunoid/video/7278568484139764993",
"https://www.tiktok.com/@volunoid/video/7278570161165110529",
"https://www.tiktok.com/@volunoid/video/7278572349501279489",
"https://www.tiktok.com/@volunoid/video/7278574361458625793",
"https://www.tiktok.com/@volunoid/video/7278578094967966977",
"https://www.tiktok.com/@volunoid/video/7278579043715255554",
"https://www.tiktok.com/@volunoid/video/7278613704218856706",
"https://www.tiktok.com/@volunoid/video/7278582251737206017",
"https://www.tiktok.com/@volunoid/video/7278585671705578754",
"https://www.tiktok.com/@volunoid/video/7278586819883617537",
"https://www.tiktok.com/@volunoid/video/7278590553803984129",
"https://www.tiktok.com/@volunoid/video/7278594700335009026",
"https://www.tiktok.com/@volunoid/video/7278598086505598209",
"https://www.tiktok.com/@volunoid/video/7278599059286265090",
"https://www.tiktok.com/@volunoid/video/7278600311961292033",
"https://www.tiktok.com/@volunoid/video/7278605065504525569",
"https://www.tiktok.com/@volunoid/video/7278611693612076289",
"https://www.tiktok.com/@volunoid/video/7278611992653434114"
];
// Fungsi untuk mengacak array secara acak
function acakArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}
// Fungsi untuk menyematkan iFrame TikTok secara acak
function sematkanTikTokAcak() {
// Acak tautan TikTok secara acak
acakArray(tautanTikTok);
// Bersihkan kontainer
document.getElementById("kontainer-embed-tiktok").innerHTML = "";
// Sematkan iFrame TikTok
var iFrameTikTok = document.createElement("iframe");
iFrameTikTok.src = "https://www.tiktok.com/embed/v2/" + tautanTikTok[0].split("/")[5];
iFrameTikTok.width = "320"; // Setel lebar sesuai yang diizinkan oleh TikTok
iFrameTikTok.height = "568"; // Setel tinggi sesuai yang diizinkan oleh TikTok
iFrameTikTok.allowfullscreen = true;
iFrameTikTok.frameborder = "0";
document.getElementById("kontainer-embed-tiktok").appendChild(iFrameTikTok);
}
// Panggil fungsi untuk menyematkan iFrame TikTok secara acak saat halaman dimuat
window.onload = sematkanTikTokAcak;
</script>
</body>
</html>-
Youtube
<!DOCTYPE html>
<html>
<head>
<title>YouTube</title>
</head>
<body>
<div id="youtubeContainer">
<!-- Konten YouTube akan ditampilkan di sini -->
</div>
<script>
// Daftar URL video YouTube yang akan digunakan secara acak
var youtubeURLs = [
"https://www.youtube.com/embed/OyipIhfzAgM",
"https://www.youtube.com/embed/Og__eOnEJmY",
"https://www.youtube.com/embed/3hOpTVaIVaU",
"https://www.youtube.com/embed/g_jmdzuCcTA",
"https://www.youtube.com/embed/V-WvB16dx5E",
"https://www.youtube.com/embed/UhrPghXlAmg",
"https://www.youtube.com/embed/usFtk9r9x4M",
"https://www.youtube.com/embed/QsvmEEbKi_M",
"https://www.youtube.com/embed/VAG5KdLZV0c",
"https://www.youtube.com/embed/q-5H0pARPx0",
"https://www.youtube.com/embed/HRryFx4X5Ok",
"https://www.youtube.com/embed/d1FlM_CKy48",
"https://www.youtube.com/embed/MHuCFBU4Ueo",
"https://www.youtube.com/embed/fK8G1mDpLCs",
"https://www.youtube.com/embed/ZEq6HjnGi_Y",
"https://www.youtube.com/embed/XKPy3BGBk7U",
"https://www.youtube.com/embed/-Ge8Lce5MVc",
"https://www.youtube.com/embed/sxDntkm1ksA",
"https://www.youtube.com/embed/MAIvW-3zE8E"
];
// Fungsi untuk menampilkan konten YouTube acak
function displayRandomYouTubeContent() {
var youtubeContainer = document.getElementById("youtubeContainer");
// Pilih indeks acak dari daftar
var randomIndex = Math.floor(Math.random() * youtubeURLs.length);
var randomYouTubeURL = youtubeURLs[randomIndex];
// Buat elemen iframe YouTube
var iframe = document.createElement("iframe");
iframe.setAttribute("src", randomYouTubeURL);
iframe.setAttribute("width", "560"); // Lebar iframe (sesuaikan sesuai kebutuhan)
iframe.setAttribute("height", "315"); // Tinggi iframe (sesuaikan sesuai kebutuhan)
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "true");
// Kosongkan konten sebelumnya (jika ada) dalam div youtubeContainer
while (youtubeContainer.firstChild) {
youtubeContainer.removeChild(youtubeContainer.firstChild);
}
// Masukkan iframe ke dalam div youtubeContainer
youtubeContainer.appendChild(iframe);
}
// Panggil fungsi untuk menampilkan konten acak saat halaman dimuat
displayRandomYouTubeContent();
</script>
</body>
</html>-
Pinterest
<!DOCTYPE html>
<html>
<head>
<title>Pinterest</title>
</head>
<body>
<p>Klik <a id="pinterestLink" href="#" target="_blank" rel="noopener">di sini</a> untuk menuju ke Pinterest.</p>
<script>
// Daftar URL Pinterest yang akan digunakan secara acak
var pinterestURLs = [
"https://id.pinterest.com/pin/1137651555855520822",
"https://id.pinterest.com/pin/1137651555855520809",
"https://id.pinterest.com/pin/1137651555855521122",
"https://id.pinterest.com/pin/1137651555855521147",
"https://id.pinterest.com/pin/1137651555855521307",
"https://id.pinterest.com/pin/1137651555855521321",
"https://id.pinterest.com/pin/1137651555855521332",
"https://id.pinterest.com/pin/1137651555855521379",
"https://id.pinterest.com/pin/1137651555855538588",
"https://id.pinterest.com/pin/1137651555855538725",
"https://id.pinterest.com/pin/1137651555855538879",
"https://id.pinterest.com/pin/1137651555855538905",
"https://id.pinterest.com/pin/1137651555855539013",
"https://id.pinterest.com/pin/1137651555855539126",
"https://id.pinterest.com/pin/1137651555855539183",
"https://id.pinterest.com/pin/1137651555855539263",
"https://id.pinterest.com/pin/1137651555855539307",
"https://id.pinterest.com/pin/1137651555855539466",
"https://id.pinterest.com/pin/1137651555855539494"
];
var titles = [
"Solusi Masalah Magang- Diabaikan",
"Solusi Masalah Magang- Harus diseleksi dulu",
"Solusi Masalah Magang- Job Desc Tidak ada",
"Solusi Masalah Magang- Boros",
"Solusi Masalah Magang- Terjebak Macet",
"Solusi Masalah Magang- Disuruh Bersih- bersih",
"Solusi Masalah Magang- Tidak Dianggap",
"Solusi Masalah Magang- Sulit Mencari Tempat Magang",
"Benefit Magang Volunoid- Durasi Custom",
"Benefit Magang Volunoid- Dikerjakan secara Remote (WFH)",
"Benefit Magang Volunoid- Bisa Dimulai Kapan Saja",
"Benefit Magang Volunoid- Deskripsi Kerja Sesuai Jurusan",
"Benefit Magang Volunoid- Menerima Hampir Semua Jurusan",
"Benefit Magang Volunoid- Mendapatkan Surat Keterangan Kerja",
"Benefit Magang Volunoid- Mendapatkan Sertifikat Magang",
"Benefit Magang Volunoid- Mendapatkan Sertifikat Keterampilan",
"Benefit Magang Volunoid- Daftar Langsung diterima",
"Benefit Magang Volunoid- Magang di PT (Perseroan Terbatas)",
"Benefit Magang Volunoid- Hemat Biaya"
];
// Fungsi untuk mengubah tautan menjadi URL Pinterest acak dan memperbarui judul tautan
function updateRandomPinterestLink() {
// Pilih indeks acak dari daftar
var randomIndex = Math.floor(Math.random() * pinterestURLs.length);
var randomPinterestURL = pinterestURLs[randomIndex];
var randomTitle = titles[randomIndex];
// Perbarui tautan dan judul tautan
var pinterestLink = document.getElementById("pinterestLink");
pinterestLink.href = randomPinterestURL;
pinterestLink.textContent = "di sini (" + randomTitle + ")";
}
// Perbarui tautan saat halaman dimuat
window.addEventListener("load", function() {
updateRandomPinterestLink();
});
// Event listener untuk tautan Pinterest
var pinterestLink = document.getElementById("pinterestLink");
pinterestLink.addEventListener("click", function(event) {
event.preventDefault();
window.open(pinterestLink.href, '_blank');
updateRandomPinterestLink(); // Ini akan memperbarui tautan setelah diklik, tetapi sebelum halaman direfresh
});
</script>
</body>
</html>
—
Jika Anda membutuhkan semua kode iFrame nya dalam satu file, kami telah menyediakan, dan bisa Anda [Download disini].
Video Implementasi
Kesimpulan
Menggunakan iFrame yang dinamis dapat meningkatkan interaktivitas dan daya tarik website Anda. Dengan mengikuti langkah-langkah yang dijelaskan di atas, Anda dapat dengan mudah mengimplementasikannya.
