এইচটিএমএল 5 সহ আইফ্রেমের বিকল্প

Question

আমি জানতে চাই যে এইচটিএমএল 5 এর সাথে আইফ্রেমগুলির বিকল্প আছে কিনা। আমি এর অর্থ, কোনও আইফ্রেম ব্যবহার না করে কোনও ওয়েব পৃষ্ঠার অভ্যন্তরে ক্রস-ডোমেন এইচটিএমএল ইনজেক্ট করতে সক্ষম হব।

Answer 1

মূলত কোনও ওয়েব পৃষ্ঠায় এইচটিএমএল এম্বেড করার জন্য 4 টি উপায় রয়েছে:

• <iframe>কোনও আইফ্রেমের সামগ্রী সম্পূর্ণরূপে আপনার পৃষ্ঠার চেয়ে পৃথক প্রসঙ্গে থাকে। যদিও এটি বেশিরভাগই দুর্দান্ত বৈশিষ্ট্য এবং এটি ব্রাউজার সংস্করণগুলির মধ্যে সর্বাধিক সামঞ্জস্যপূর্ণ, এটি অতিরিক্ত চ্যালেঞ্জ তৈরি করে (এর সামগ্রীতে ফ্রেমের আকার মোড়ানো সঙ্কুচিত, স্ট্রাইলে প্রায় অসম্ভব) স্ক্রিপ্টের বাইরে / বাইরে থেকে হতাশাই হতাশ।
• এজেএক্স । এখানে প্রদর্শিত সমাধানগুলি প্রমাণ হিসাবে, আপনি XMLHttpRequestতথ্যটি পুনরুদ্ধার করতে এবং এটি আপনার পৃষ্ঠায় ইনজেক্ট করতে অবজেক্টটি ব্যবহার করতে পারেন । এটি আদর্শ নয় কারণ এটি স্ক্রিপ্টিং কৌশলগুলির উপর নির্ভর করে, ফলে অন্যান্য ত্রুটিগুলির মধ্যে মৃত্যুদণ্ড কার্যকর করা ধীর এবং আরও জটিল হয়ে যায় ।
• হ্যাক । এই প্রশ্নে কয়েকটি উল্লেখ করা হয়েছে এবং খুব নির্ভরযোগ্য নয়।

• এইচটিএমএল 5 ওয়েব উপাদান । এইচটিএমএল আমদানি, ওয়েব উপাদানগুলির অংশ, এইচটিএমএল ডকুমেন্টগুলিতে এইচটিএমএল ডকুমেন্ট বান্ডিল করতে দেয়। যে অন্তর্ভুক্ত HTML, CSS, JavaScriptবা অন্য কিছু একটি .htmlফাইল থাকতে পারে। এটি অনেক আকর্ষণীয় ব্যবহারের ক্ষেত্রে এটি একটি দুর্দান্ত সমাধান করে তোলে: একটি অ্যাপ্লিকেশনটিকে এমনভাবে বানানো উপাদানগুলিতে বিভক্ত করুন যা আপনি বিল্ডিং ব্লক হিসাবে বিতরণ করতে পারেন, অপ্রয়োজনীয়তা, কোড সংগঠন ইত্যাদি এড়ানোর জন্য নির্ভরতাগুলি আরও ভালভাবে পরিচালনা করতে পারেন এখানে একটি তুচ্ছ উদাহরণ:

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

নেটিভ সামঞ্জস্যতা এখনও একটি সমস্যা, তবে আপনি আজকে চিরসবুজ ব্রাউজারগুলিতে কাজ করতে একটি পলিফিল ব্যবহার করতে পারেন ।

আপনি এখানে এবং এখানে আরও শিখতে পারেন ।

Comments

এইচটিএমএল 5 ওয়েব উপাদানগুলি আকর্ষণীয়।

— কৃষ্ণ শ্রীহরি

আমি জানি এই পোস্টটি কিছুটা পুরানো তবে কেবল মন্তব্য করতে চাই: এজেএক্সের প্রসঙ্গে, "এটি স্ক্রিপ্টিং কৌশলগুলির উপর নির্ভর করে বলে এটি ধারণা করা হয় না" ... সুতরাং, স্ক্রিপ্টিং ব্যবহারে কী দোষ হয়েছে? এজ্যাক্স হ'ল এই পছন্দগুলির অবিস্মরণীয় সামনের রানার এবং এটি দ্রুত স্ট্যান্ডার্ড হয়ে উঠছে।

— nmg49

দুর্ভাগ্যক্রমে এইচটিএমএল আমদানি এখন একটি অপ্রচলিত বৈশিষ্ট্য। বিকাশকারী.মোজিলা.আর.ইন-

— ইউএস

এটি অর্জনের কোনও নতুন উপায়?

— ওয়াল্টার

আইফ্রেমগুলির সাথে আরেকটি গুরুত্বপূর্ণ অপূর্ণতা হ'ল সত্য যে এখানে অনেকগুলি ওয়েবসাইট রয়েছে যা 'এক্স-ফ্রেম-বিকল্পগুলি' সেট করে 'একইরিগিন' এবং তারপরে কেবল সংযোগটি অস্বীকার করে। এই ক্ষেত্রে, আপনার আইফ্রেম খালি থাকবে। এটি ঠিক করার কোনও উপায় নেই।

— ইগোর পি।

Answer 2

আপনি অবজেক্ট এবং এম্বেড যেমন ব্যবহার করতে পারেন:

<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>

যা নতুন নয়, তবে এখনও কাজ করে। যদিও এটির একই কার্যকারিতা আছে কিনা তা আমি নিশ্চিত নই।

Comments

ধন্যবাদ হ্যাপস, আমাকে বাক্সের মতো ফেসবুকের জন্য এসডিকে লোড করে বাঁচিয়েছে।

— টেচাগ্যাসাইট

Answer 3

না, সমতুল্য নেই। <iframe>উপাদান এখনও HTML5 এর মধ্যে বৈধ। আপনার কী সঠিক ইন্টারঅ্যাকশন দরকার তা নির্ভর করে বিভিন্ন এপিআই হতে পারে। উদাহরণস্বরূপ এমন একটি postMessageপদ্ধতি রয়েছে যা আপনাকে ক্রস ডোমেন জাভাস্ক্রিপ্ট ইন্টারঅ্যাকশন অর্জন করতে দেয়। তবে আপনি যদি ক্রস ডোমেন এইচটিএমএল বিষয়বস্তু প্রদর্শন করতে চান (CSS এর সাথে স্টাইলযুক্ত এবং জাভাস্ক্রিপ্টের সাহায্যে ইন্টারেক্টিভ তৈরি করেছেন) iframeএটি করার একটি ভাল উপায় হিসাবে থেকে যায়।

Comments

আমার গুগল থেকে সামগ্রী লোড করা প্রয়োজন। তবে গুগল যদি আইফ্রেমেড হয় না তবে বিকল্পটি কী।

— মাইকে

@ মাইক, বিকল্পটি আপনি যে পরিষেবাটি ব্যবহার করতে চান তার জন্য API ব্যবহার করা হবে। গুগল তার বেশিরভাগ পরিষেবার জন্য RESTful API সরবরাহ করে।

— দারিন দিমিত্রভ

Answer 4

object এইচটিএমএল 5 এ একটি সহজ বিকল্প:

<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 !!');" />

Comments

নিরাপত্তা নীতি যেমন

— আইফ্রেমে

মনে রাখবেন যে বেশিরভাগ আধুনিক ব্রাউজারগুলি ব্রাউজার প্লাগইনগুলির জন্য সমর্থন অবমূল্যায়ন করে এবং অপসারণ করেছে, সুতরাং আপনি যদি নিজের ব্যবহারকারীকে গড় ব্যবহারকারীর ব্রাউজারে চালিত করতে চান তবে <এম্বেড> এর উপর নির্ভর করা সাধারণত বুদ্ধিমানের কাজ নয়।

— নীরজ

Answer 5

আপনি এই কাজ করতে এবং সার্ভার যা থেকে ভিত্তিক পৃষ্ঠা বা সামগ্রী পরিবেশিত হচ্ছে তা নিয়ন্ত্রণ করতে চান, আপনি ক্রস অরিজিন রিসোর্স শেয়ারিং (ব্যবহার করতে পারেন http://www.w3.org/TR/access-control/ ) client- করার অনুমতি পার্শ্ব জাভাস্ক্রিপ্ট এর <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();

এখন এই পুরো ক্রিয়াকলাপের লিঞ্চপিনের জন্য আপনার সার্ভারের জন্য আপনার কোড লিখতে হবে যা ক্লায়েন্টদের Access-Control-Allow-Originশিরোনাম দেয়, নির্দিষ্ট করে কোন ডোমেনগুলি আপনি ক্লায়েন্ট-সাইড কোডের মাধ্যমে অ্যাক্সেস করতে চান তা উল্লেখ করে XMLHttpRequest()। নিম্নলিখিত পিএইচপি কোডের উদাহরণ যা আপনি এই পৃষ্ঠাগুলিকে ক্লায়েন্টগুলিতে প্রেরণের জন্য আপনার পৃষ্ঠার শীর্ষে অন্তর্ভুক্ত করতে পারেন:

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

Answer 6

এটি কাজ করে বলে মনে হয়, যদিও ডাব্লু 3 সি উল্লেখ করে যে এটি "বাহ্যিক (সাধারণত নন-এইচটিএমএল) অ্যাপ্লিকেশন বা ইন্টারেক্টিভ সামগ্রীর জন্য নয়"

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

আরও তথ্য: http://www.w3.org/wiki/HTML/E উপাদান / e এম্বেড http://www.w3schools.com/tags/tag_e એમ્બેડ. asp

Answer 7

ক্রস-ডোমেন ভিজ্যুয়াল সামগ্রীটি ডাউনলোড করার জন্য এখনও একটি আইফ্রেমই সেরা উপায়। এজেএক্সের সাহায্যে আপনি অবশ্যই কোনও ওয়েব পৃষ্ঠা থেকে এইচটিএমএল ডাউনলোড করতে পারেন এবং এটি একটি ডিভিতে আটকে রাখতে পারেন (অন্যরা যেমন উল্লেখ করেছেন) তবে বড় সমস্যাটি হচ্ছে সুরক্ষা। ইফ্রেমেসের সাহায্যে আপনি ক্রস ডোমেন সামগ্রীটি লোড করতে সক্ষম হবেন তবে বিষয়বস্তুটি আসলে আপনার নিজস্ব নয় বলে এটি হেরফের করতে সক্ষম হবেন না। অন্যদিকে এজেএক্সের সাহায্যে আপনি ডাউনলোড করতে সক্ষম যে কোনও সামগ্রী অবশ্যই ম্যানিপুলেট করতে পারবেন তবে অন্য ডোমেনের সার্ভারটি এমনভাবে সেটআপ করা দরকার যা আপনাকে ডাউনলোডটি শুরু করার অনুমতি দেয়। অনেক সময় আপনি অন্য ডোমেনের কনফিগারেশন অ্যাক্সেস করতে পারবেন না এবং এমনকি যদি আপনি না করেন, যদি আপনি সারাক্ষণ এই ধরণের কনফিগারেশন না করেন তবে এটি মাথা ব্যথার কারণ হতে পারে। এক্ষেত্রে iframe অনেক সহজ বিকল্প হতে পারে।

অন্যরা যেমন উল্লেখ করেছে আপনি এম্বেড ট্যাগ এবং অবজেক্ট ট্যাগটিও ব্যবহার করতে পারেন তবে এটি আইফ্রেমের চেয়ে বেশি উন্নত বা নতুন নয়।

এইচটিএমএল 5 ক্রস ডোমেনগুলি থেকে তথ্য পেতে ওয়েব API গুলি গ্রহণের দিকে আরও এগিয়ে গেছে। সাধারণত ওয়েব API গুলি এইচটিএমএল না করে কেবল ডেটা ফেরত দেয়।

Comments

এটি সত্যই কোনও উত্তর নয় তবে অবশ্যই এটিnice-to-know

— স্টেফ গেইলস

Answer 8

কোনও পৃষ্ঠা একটি ডিভিডে লোড করতে আপনি এক্সএমএলএইচটিপিপিউকাস্ট ব্যবহার করতে পারেন (বা আপনার পৃষ্ঠার অন্য কোনও উপাদান সত্যই)। একটি উদাহরণ কাজ হবে:

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();
}

যদি আপনার সেভার সক্ষম হয় তবে আপনি এটি করতে পিএইচপি ব্যবহার করতে পারেন তবে আপনি যেহেতু এইচটিএমএল 5 পদ্ধতি জিজ্ঞাসা করছেন তাই এটি আপনার প্রয়োজনীয় সমস্ত হওয়া উচিত।

Comments

XMLHttpRequest ব্যবহার করে অন্যান্য ডোমেনগুলি থেকে সামগ্রী লোড করা বেশিরভাগ ব্রাউজার দ্বারা অবরুদ্ধ।

— এরিক তেরেনিয়াস

ওপ ক্রস-ডোমেনের জন্য জিজ্ঞাসা করছে, এই উত্তরটি বৈধ নয়।

— তেওমন শিপাহি

Answer 9

আমি নোড-iframe- প্রতিস্থাপন এই সমস্যাটি সমাধান করার জন্য একটি নোড মডিউল তৈরি করেছি । আপনার সামগ্রীতে ইনজেকশন দেওয়ার জন্য আপনি প্যারেন্ট সাইট এবং সিএসএস নির্বাচকের উত্স URL সরবরাহ করেন এবং এটি দুটি একসাথে একত্রিত করে।

প্যারেন্ট সাইটে পরিবর্তনগুলি প্রতি 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
    });
});

উত্সটিতে বিবিসি নিউজের হোম পেজে কন্টেন্ট ইনজেকশনের কার্যকারী উদাহরণ রয়েছে ।

Answer 10

আপনার JSON-P সন্ধান করা উচিত - আমার যখন সমস্যা হয়েছিল তখন এটি আমার জন্য একটি নিখুঁত সমাধান ছিল:

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

আপনি মূলত একটি জাভাস্ক্রিপ্ট ফাইলটি সংজ্ঞায়িত করেন যা আপনার সমস্ত ডেটা এবং অন্য একটি জাভাস্ক্রিপ্ট ফাইল লোড করে যা এটি প্রক্রিয়া করে এবং প্রদর্শন করে। এটি iframes এর কুরুচিপূর্ণ স্ক্রোলবার পরিত্রাণ পেতে।