Embed Halaman Website Lain Serta Menampilkan Dengan Bootstrap dan Iframe

Embed Halaman Website Lain Serta Menampilkan Dengan Bootstrap dan Iframe

Seorang teman dahulu kala pernah bertanya, Bagaimana ya caranya menampilkan content atau isi web yang ada pada website lain untuk ditampilkan di website kita?. Nah saat ini mungkin anda juga bertanya hal yang sama?? Sehingga jumlah yang bertanya dengan pertanyaan yang sama semakin bertambah. Oke lantas sekarang setelah anda bertanya lalu bagaimana solusinya, bagaimana anda dapat melakukan itu? Pada tips and trik kali ini akan dijelaskan.
 
Yang patut anda ketahui sebelum melakukan hal ini adalah, anda harus mengetahui terlebih dahulu dasar-dasar HTML dan PHP kala bisa ditambah JAVA...semakin juara, tidak wajib untuk dihafal, tapi mutlak mengerti setidaknya dasar-dasarnya.
 
Di HTML memang sudah ada caranya, tetapi disini akan kita coba membuatnya dengan bootstrap

Ingin belajar tentang bootstrap?, banyak sekali video tutorial di sana.



Jika dilihat cara yang digunakan di bootstrap ini pasti salah satu dari kita sudah pernah menggunakannya, tetapi ada juga yang gak sadar bahwa cara bootstrap ini bisa di gunakan untuk menampilkan website lain dengana iframe. Oke bagaimana caranya?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap </title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <-e-script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <-e-script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="col-md-2"></div>
    <div class="col-md-8">
    <h1>Menampilkan Halaman Website Lain Dengan Embed Bootstrap</h1>
      <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="https://nureda.id/"></iframe>
      </div>
    </div>
    <div class="col-md-2"></div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <-e-script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <-e-script src="js/bootstrap.min.js"></script>
  </body>
</html>


Panjang lebar Iframe yang akan digunakan, silahkan dicoba dengan menganti kode HTML


<iframe src="https://yoururl"  scrolling="no" style=" width: 100%; height: 100%;  overflow: hidden;" ></iframe>
<iframe frameborder="0" scrolling="no" style="width:100%; height:100%; border:none;" src="https://yoururl" ></iframe>
<iframe style="border: 0; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%;" src="https://yoururl" ></iframe>

Jangan lupa didownload dulu bootstrapya dan file indexnya seperti diatas.

Oke Dan Ini Hasil Tampilan Halaman Depan Web Gudang Fashion:

Dan Ini Hasil Tampilkan Halaman Produk Web Skincare:
 
Perbedaan antara Frame dan IFrame 
 
Bingkai adalah tag HTML yang digunakan untuk membagi halaman web menjadi berbagai bingkai / jendela. Digunakan sebagai tag, itu menentukan setiap frame dalam tag frameset. 
 
Iframe adalah tag yang memungkinkan anda untuk meletakkan halaman di dalam halaman. Iframe menggunakan atribut src untuk menunjukkan file yang akan ditampilkan dalam iframe. Selain itu juga, panjang dan lebar iframe bisa kita atur menggunakan atribut width dan height. 
 
 
Selain tag iframe, ada tag frame. Tag frame beserta dengan frameset adalah salah satu tag yang tidak didukung lagi dalam HTML5. Untuk menggunakannya dalam browser yang menggunakan HTML 5, disini perlu menggunakan tag Doctype. 
 

<!DOCTYPE HTML Frameset DTD>
<HTML>
    <frameset cols="35%, *, 35%">
    <frame src="web1.html">
    <frame src="web2.htm">
    <frame src="web3.htm">
     </frameset>
</HTML>
Frame dan Iframe pada umumnya hampir sama. Bedanya hanya, frame bisa dikelompokkan dengan frameset. Selain itu juga, ada atribut rows dan cols yang menentukan bagaimana susunan frame yang ditampilkan dan persentase ukuran masing-masing frame. Kode HTML di bawah ini hampir sama dengan yang di atas hanya perbedaannya pada atribut cols yang diganti dengan rows. 
 

<!DOCTYPE HTML Frameset DTD>
<HTML>
    <frameset rows="35%, *, 35%">
    <frame src="web1.html">
    <frame src="web2.htm">
    <frame src="web3.htm">
     </frameset>
</HTML>


Bagaimana informasi di atas? Semoga bermanfaat,ya!