ทางเลือกแทน iFrames ด้วย HTML5

ฉันต้องการทราบว่ามีทางเลือกอื่นสำหรับ iFrames ด้วย HTML5 หรือไม่ ฉันหมายความว่าสามารถฉีด HTML ข้ามโดเมนในหน้าเว็บได้โดยไม่ต้องใช้ iFrame

โดยทั่วไปมี 4 วิธีในการฝัง HTML ลงในหน้าเว็บ:

• <iframe>เนื้อหาของ iframe มีชีวิตโดยสิ้นเชิงในบริบทที่แยกจากหน้าของคุณ ในขณะที่ส่วนใหญ่เป็นคุณสมบัติที่ยอดเยี่ยมและสามารถใช้งานร่วมกับเบราว์เซอร์ได้มากที่สุด แต่ก็สร้างความท้าทายเพิ่มเติม (การลดขนาดของเฟรมลงในเนื้อหาของมันนั้นเป็นเรื่องที่ยากลำบาก
• AJAX ตามที่โซลูชั่นที่แสดงไว้ในที่นี้พิสูจน์แล้วคุณสามารถใช้XMLHttpRequestวัตถุเพื่อดึงข้อมูลและฉีดไปยังหน้าของคุณ มันไม่เหมาะเพราะมันขึ้นอยู่กับเทคนิคการเขียนสคริปต์จึงทำให้การดำเนินการช้าลงและซับซ้อนมากขึ้นในหมู่อื่น ๆข้อบกพร่อง
• hacks มีเพียงไม่กี่คนที่กล่าวถึงคำถามนี้และไม่น่าเชื่อถือมาก

• คอมโพเนนต์ของเว็บ HTML5 HTML Imports ซึ่งเป็นส่วนหนึ่งของ Web Components อนุญาตให้รวมเอกสาร HTML ในเอกสาร HTML อื่น ๆ ซึ่งรวมถึงHTML, CSS, JavaScriptหรือสิ่งอื่น.htmlไฟล์สามารถมี สิ่งนี้ทำให้เป็นโซลูชันที่ยอดเยี่ยมด้วยกรณีการใช้งานที่น่าสนใจมากมาย: แบ่งแอปเป็นส่วนประกอบที่รวมไว้ซึ่งคุณสามารถแจกจ่ายเป็นแบบเอกสารสำเร็จรูปจัดการการอ้างอิงได้ดีขึ้นเพื่อหลีกเลี่ยงความซ้ำซ้อนองค์กรรหัส ฯลฯ นี่คือตัวอย่างเล็กน้อย:

  <!-- Resources on other origins must be CORS-enabled. -->
  <link rel="import" href="http://example.com/elements.html">

ความเข้ากันได้ดั้งเดิมยังคงเป็นปัญหาอยู่ แต่คุณสามารถใช้polyfillเพื่อให้ทำงานได้ในเบราว์เซอร์ที่เขียวตลอดวันนี้

คุณสามารถเรียนรู้เพิ่มเติมที่นี่และที่นี่

คุณสามารถใช้วัตถุและฝังได้เช่น:

<object data="http://www.web-source.net" width="600" height="400">
    <embed src="http://www.web-source.net" width="600" height="400"> </embed>
    Error: Embedded data could not be displayed.
</object>

ซึ่งไม่ใช่เรื่องใหม่ แต่ยังใช้งานได้ ฉันไม่แน่ใจว่ามันมีฟังก์ชั่นเหมือนกันหรือไม่

ไม่ไม่เทียบเท่ากัน <iframe>องค์ประกอบยังคงถูกต้องใน HTML5 ทั้งนี้ขึ้นอยู่กับการโต้ตอบที่แน่นอนที่คุณต้องการอาจมี API ที่แตกต่างกัน ตัวอย่างเช่นมีpostMessageวิธีการที่ช่วยให้คุณได้รับการโต้ตอบ javascript ข้ามโดเมน แต่ถ้าคุณต้องการที่จะแสดงเนื้อหา HTML ข้ามโดเมน (สไตล์ด้วย CSS และทำให้การโต้ตอบกับ javascript) iframeยังคงเป็นวิธีที่ดีที่จะทำ

object เป็นทางเลือกที่ง่ายใน HTML5:

<object data="https://blogs.claritycon.com/blog/2016/03/bower-packages-asp-net-core-1-0/" width="400" height="300" type="text/html">
    Alternative Content
</object>

คุณสามารถลองembed:

<embed src="https://blogs.claritycon.com/blog/2016/03/bower-packages-asp-net-core-1-0/" width=200 height=200 onerror="alert('URL invalid !!');" />

หากคุณต้องการทำสิ่งนี้และควบคุมเซิร์ฟเวอร์ที่ให้บริการหน้าฐานหรือเนื้อหาคุณสามารถใช้ Cross Origin Resource Sharing ( http://www.w3.org/TR/access-control/ ) เพื่อให้ลูกค้า จาวาสคริปต์ด้านข้างเพื่อโหลดข้อมูลลงใน<div>ผ่านXMLHttpRequest():

// I safely ignore IE 6 and 5 (!) users
// because I do not wish to proliferate
// broken software that will hurt other
// users of the internet, which is what
// you're doing when you write anything
// for old version of IE (5/6)
xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if(xhr.readyState == 4 && xhr.status == 200) {
    document.getElementById('displayDiv').innerHTML = xhr.responseText;
  }
};
xhr.open('GET', 'http://api.google.com/thing?request=data', true);
xhr.send();

ตอนนี้สำหรับ lynchpin ของการดำเนินการทั้งหมดนี้คุณจำเป็นต้องเขียนโค้ดสำหรับเซิร์ฟเวอร์ของคุณที่จะให้ลูกค้าส่วนหัวระบุว่าโดเมนที่คุณต้องการรหัสฝั่งไคลเอ็นต์เพื่อให้สามารถเข้าถึงได้ผ่านทางAccess-Control-Allow-Origin XMLHttpRequest()ต่อไปนี้เป็นตัวอย่างของโค้ด PHP ที่คุณสามารถใส่ที่ด้านบนของหน้าเพื่อส่งส่วนหัวเหล่านี้ไปยังลูกค้า:

<?php
  header('Access-Control-Allow-Origin: http://api.google.com');
  header('Access-Control-Allow-Origin: http://some.example.com');
?>

สิ่งนี้ดูเหมือนว่าจะใช้งานได้แม้ว่า W3C จะระบุว่าไม่ได้มีเจตนา "สำหรับแอปพลิเคชันภายนอก (โดยทั่วไปไม่ใช่ HTML) หรือเนื้อหาแบบโต้ตอบ"

<embed src="http://www.somesite.com" width=200 height=200 />

ข้อมูลเพิ่มเติม: http://www.w3.org/wiki/HTML/Elements/embed http://www.w3schools.com/tags/tag_embed.asp

iframe ยังคงเป็นวิธีที่ดีที่สุดในการดาวน์โหลดเนื้อหาภาพข้ามโดเมน ด้วย AJAX คุณสามารถดาวน์โหลด HTML จากหน้าเว็บและติดไว้ใน div (อย่างที่คนอื่น ๆ พูดถึง) แต่ปัญหาที่ใหญ่กว่าคือความปลอดภัย ด้วย iframes คุณจะสามารถโหลดเนื้อหาข้ามโดเมน แต่จะไม่สามารถจัดการได้เนื่องจากเนื้อหาไม่ได้เป็นของคุณ ในทางตรงกันข้ามกับ AJAX คุณสามารถจัดการเนื้อหาใด ๆ ที่คุณสามารถดาวน์โหลดได้อย่างแน่นอน แต่เซิร์ฟเวอร์ของโดเมนอื่นจะต้องมีการตั้งค่าในลักษณะที่จะช่วยให้คุณสามารถดาวน์โหลดเพื่อเริ่มต้นด้วย หลายครั้งที่คุณจะไม่สามารถเข้าถึงการกำหนดค่าของโดเมนอื่นและแม้ว่าคุณจะทำเช่นนั้นเว้นแต่ว่าคุณจะทำการกำหนดค่าแบบนั้นตลอดเวลาอาจทำให้คุณปวดหัวได้ ในกรณีนี้ iframe สามารถเป็นทางเลือกที่ง่ายกว่ามาก

ตามที่คนอื่นพูดถึงคุณสามารถใช้แท็กฝังและแท็กวัตถุ แต่นั่นไม่จำเป็นต้องสูงกว่าหรือใหม่กว่า iframe

HTML5 เพิ่มมากขึ้นในทิศทางของการใช้เว็บ API เพื่อรับข้อมูลจากข้ามโดเมน ปกติแล้วเว็บ API จะส่งคืนข้อมูลเท่านั้นไม่ใช่ HTML

คุณสามารถใช้ XMLHttpRequest เพื่อโหลดหน้าลงใน div (หรือองค์ประกอบอื่น ๆ ของหน้าของคุณจริงๆ) ฟังก์ชั่นตัวอย่างจะเป็น:

function loadPage(){
if (window.XMLHttpRequest){
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}else{
    // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        document.getElementById("ID OF ELEMENT YOU WANT TO LOAD PAGE IN").innerHTML=xmlhttp.responseText;
    }
}

xmlhttp.open("POST","WEBPAGE YOU WANT TO LOAD",true);
xmlhttp.send();
}

หากเซิร์ฟเวอร์ของคุณมีความสามารถคุณสามารถใช้ PHP เพื่อทำสิ่งนี้ได้ แต่เนื่องจากคุณขอวิธี HTML5 สิ่งนี้จึงเป็นสิ่งที่คุณต้องการ

ฉันสร้างโมดูลโหนดเพื่อแก้ปัญหานี้node-iframe-replaceโหนดคุณระบุ URL แหล่งที่มาของไซต์แม่และตัวเลือก CSS เพื่อแทรกเนื้อหาของคุณเข้าด้วยกัน

การเปลี่ยนแปลงในไซต์แม่จะรับทุก 5 นาที

var iframeReplacement = require('node-iframe-replacement');

// add iframe replacement to express as middleware (adds res.merge method) 
app.use(iframeReplacement);

// create a regular express route 
app.get('/', function(req, res){

    // respond to this request with our fake-news content embedded within the BBC News home page 
    res.merge('fake-news', {
        // external url to fetch 
       sourceUrl: 'http://www.bbc.co.uk/news',
       // css selector to inject our content into 
       sourcePlaceholder: 'div[data-entityid="container-top-stories#1"]',
       // pass a function here to intercept the source html prior to merging 
       transform: null
    });
});

แหล่งที่มาประกอบด้วยตัวอย่างการทำงานของการแทรกเนื้อหาลงในหน้าแรกของข่าวบีบีซี

คุณควรดู JSON-P - นั่นเป็นทางออกที่สมบูรณ์แบบสำหรับฉันเมื่อฉันมีปัญหา:

https://en.wikipedia.org/wiki/JSONP

คุณกำหนดไฟล์จาวาสคริปต์ที่โหลดข้อมูลทั้งหมดของคุณและไฟล์จาวาสคริปต์อื่นที่ประมวลผลและแสดงผล นั่นเป็นการกำจัดแถบเลื่อนที่น่าเกลียดของ iframes