কীভাবে আইএমএফের রাষ্ট্রটি না হারিয়ে ডিওমে আইফ্রেম স্থানান্তরিত করতে হয়?

Question 1

এই সাধারণ এইচটিএমএলটি একবার দেখুন:

<div id="wrap1">
  <iframe id="iframe1"></iframe>
</div>
<div id="warp2">
  <iframe id="iframe2"></iframe>
</div>

ধরা যাক আমি মোড়কগুলি সরাতে চেয়েছিলাম যাতে এটি #wrap2আগে ছিল #wrap1। জাভাস্ক্রিপ্ট দ্বারা iframes দূষিত হয়। আমি jQuery এর .insertAfter()এবং সম্পর্কে সচেতন .insertBefore()। যাইহোক, আমি যখন সেগুলি ব্যবহার করি তখন আইফ্রেম তার সমস্ত HTML এবং জাভাস্ক্রিপ্ট ভেরিয়েবল এবং ইভেন্টগুলি হারাবে।

নীচে আইফ্রেমের এইচটিএমএল বলতে দিন:

<html>
  <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
      // The variable below would change on click
      // This represents changes on variables after the code is loaded
      // These changes should remain after the iFrame is moved
      variableThatChanges = false;
      $(function(){
        $("body").click(function(){ 
          variableThatChanges = true; 
        });
      });
    </script>
  </head>
  <body>
    <div id='anything'>Illustrative Example</div>
  </body>
</html>

উপরের কোডে, ভেরিয়েবল variableThatChanges... ব্যবহারকারী যদি শরীরে ক্লিক করে তবে পরিবর্তন হবে would এই চলকটি এবং ক্লিক ইভেন্টটি আইফ্রেম সরিয়ে নেওয়ার পরে থাকা উচিত (শুরু হওয়া অন্য কোনও ভেরিয়েবল / ইভেন্ট সহ)

আমার প্রশ্নটি নিম্নলিখিত: জাভাস্ক্রিপ্টের সাথে (jQuery সহ বা ছাড়া), আমি কীভাবে ডম (এবং তাদের আইফ্রেমে চাইল্ডস) এর মোড়ক নোডগুলি সরাতে পারি যাতে আইফ্রেমের উইন্ডো একই থাকে এবং আইফ্রেমের ইভেন্টগুলি / পরিবর্তনগুলি / ইত্যাদি স্থির থাকে একই?

Question 2

কোনও আইফ্র্যাম পুনরায় লোড না করে ডোমের এক জায়গা থেকে অন্য জায়গায় নিয়ে যাওয়া সম্ভব নয়।

এখানে স্থানীয় জাভাস্ক্রিপ্ট ব্যবহার করে আইফ্রেমগুলি এখনও পুনরায় লোড করার একটি উদাহরণ এখানে দেওয়া হয়েছে: http://jsfiddle.net/pZ23B/

var wrap1 = document.getElementById('wrap1');
var wrap2 = document.getElementById('wrap2');
setTimeout(function(){
    document.getElementsByTagName('body')[0].appendChild(wrap1);
},10000);

Question 3

এই উত্তরটি @ জেজলিনের অনুগ্রহের সাথে সম্পর্কিত

ডাব্লু 3 / ডোম স্পেসে প্রচুর অনুসন্ধান করেছিল এবং এমন চূড়ান্ত কিছু খুঁজে পেল না যা স্পষ্টভাবে বলে যে ডিওএম গাছে চলার সময় iframe পুনরায় লোড করা উচিত, তবে আমি ওয়েবকিটের ট্র্যাক / বাগজিলা / মাইক্রোসফ্টসে প্রচুর রেফারেন্স এবং মন্তব্য পেয়েছি বছরের পর বছর ধরে বিভিন্ন আচরণের পরিবর্তন ঘটে।

আমি আশা করি যে কেউ এই সমস্যা সম্পর্কিত নির্দিষ্ট কিছু খুঁজে পাবেন তবে আপাতত আমার অনুসন্ধানগুলি এখানে রয়েছে:

রাইসুক নিভা অনুসারে - "এটাই প্রত্যাশিত আচরণ"।
একটি "ম্যাজিক ইফ্রেমে" ছিল ( ওয়েবকিট, ২০১০ ) তবে এটি ২০১২ সালে সরানো হয়েছিল ।
এমএসের মতে - " আইওএম থেকে অপসারণের সময় iframe সংস্থানগুলি মুক্তি দেওয়া হয় "। যখন আপনি appendChild(node)বিদ্যমান নোডটি করেন - এটি nodeপ্রথমে ডোম থেকে সরানো হয়।
মজার বিষয় এখানে - IE<=8iframe পুনরায় লোড না - এই আচরণটি কিছুটা নতুন (যেহেতু IE>=9)।
মতে Hallvord আরএম Steen মন্তব্য, এই থেকে একটি উদ্ধৃতি আইফ্রেম চশমা

ব্রাউজিং প্রসঙ্গে একটি নথিতে যদি একটি আইফ্রেমে উপাদান সন্নিবেশ করা হয়, তখন ব্যবহারকারী এজেন্টকে অবশ্যই একটি নতুন ব্রাউজিং প্রসঙ্গ তৈরি করতে হবে, উপাদানটির নেস্টেড ব্রাউজিং প্রসঙ্গটি সদ্য নির্মিত ব্রাউজিং প্রসঙ্গে সেট করতে হবে এবং তারপরে "প্রথমবারের জন্য আইফ্রেমে বৈশিষ্ট্যগুলি প্রক্রিয়া করুন " ।

এটি আমি চশমাগুলির মধ্যে সর্বাধিক নিকটতম জিনিসটি পেয়েছি, তবে এটির এখনও কিছু ব্যাখ্যা প্রয়োজন (যেহেতু আমরা যখন iframeডিওমে উপাদানটি সরিয়ে ফেলি তখন আমরা সত্যিকার অর্থে একটি সম্পূর্ণ করি না remove, এমনকি ব্রাউজারগুলি node.removeChildপদ্ধতিটি ব্যবহার করলেও )।

Question 4

যখনই কোনও আইফ্রেমে সংযুক্ত করা হয় এবং একটি এসসিআর বৈশিষ্ট্য প্রয়োগ করা হয় তখন এটি জেএসের মাধ্যমে কোনও ইমেজ ট্যাগ তৈরি করার সময় একটি লোড ক্রিয়াকে একইভাবে জ্বালিয়ে দেয়। সুতরাং আপনি যখন সরান এবং তারপরে এগুলি যুক্ত করেন তারা সম্পূর্ণ নতুন সত্তা এবং সেগুলি সতেজ করে। এটি কীভাবে window.location = window.locationকোনও পৃষ্ঠা পুনরায় লোড করবে of

আমি পুনঃস্থাপন করতে জানি একমাত্র উপায় iframesCSS এর মাধ্যমে। এটির সাথে পরিচালনা করার একটি উপায় দেখিয়ে আমি এখানে এক উদাহরণ রেখেছি flex-box: https://jsfiddle.net/3g73sz3k/15/

মূল ধারণাটি হ'ল একটি flex-boxমোড়ক তৈরি করা এবং তারপরে প্রতিটি আইফ্রেমে র‌্যাপারে অর্ডার অ্যাট্রিবিউটটি ব্যবহার করে আইফ্রেমের জন্য একটি নির্দিষ্ট ক্রম সংজ্ঞায়িত করা।

<style>
  .container{
    display: flex;
    flex-direction: column;
  }
</style>
<div class="container">
  <div id="wrap1" style="order: 0" class="iframe-wrapper">
    <iframe id="iframe1" src="https://google.com"></iframe>
  </div>
  <div id="warp2" style="order: 1" class="iframe-wrapper">
    <iframe id="iframe2" src="https://bing.com"></iframe>
  </div>
</div>

আপনি জেএস ফ্রিডলে দেখতে পাচ্ছেন এই orderস্টাইলগুলি flipবোতামটি সরল করতে ইনলাইন রয়েছে তাই ঘোরান iframes।

আমি স্ট্যাকওভারফ্লো প্রশ্নটি থেকে সমাধানটি উত্সাহিত করেছি: কেবল সিএসএসের সাথে ডিআইভি পজিশনের অদলবদল করুন

আশা করি এইটি কাজ করবে.

Question 5

আপনি যদি পৃষ্ঠায় আইফ্রেম তৈরি করে থাকেন এবং কেবল তার অবস্থানটি সরানোর প্রয়োজন পরে এই পদ্ধতির চেষ্টা করুন:

আইফ্রেমটি শরীরে সংযোজন করুন এবং আইফ্রেমটি যেখানে চান সেখানে রাখতে একটি উচ্চ জেড-সূচক এবং শীর্ষ, বাম, প্রস্থ, উচ্চতা ব্যবহার করুন।

এমনকি সিএসএস জুম পুনরায় লোড না করে শরীরে কাজ করে যা দুর্দান্ত!

আমি আমার "উইজেট" এর জন্য দুটি রাজ্য বজায় রাখি এবং এটি হয় ডিওমে জায়গায় স্থাপন করা হয় বা এই পদ্ধতিটি ব্যবহার করে শরীরে।

এটি দরকারী যখন অন্যান্য সামগ্রী বা লাইব্রেরিগুলি আপনার আইফ্রেমে স্কোয়াশ বা স্কোয়াশ করে।

বুম!

Question 6

দুর্ভাগ্যক্রমে, parentNodeএইচটিএমএল ডিওএম উপাদানটির সম্পত্তি কেবল পঠনযোগ্য। আপনি অবশ্যই আইফ্রেমের অবস্থানগুলি সামঞ্জস্য করতে পারেন তবে অবশ্যই আপনি ডিওমে তাদের অবস্থান পরিবর্তন করতে পারবেন না এবং তাদের রাজ্যগুলি সংরক্ষণ করতে পারবেন না।

আমি তৈরি করা এই jsfiddle দেখুন যা একটি ভাল পরীক্ষার বিছানা সরবরাহ করে। http://jsfiddle.net/RpHTj/1/

মানটি টগল করতে বক্সে ক্লিক করুন। জাভাস্ক্রিপ্ট চালানোর জন্য "সরানো" ক্লিক করুন।

Question 7

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

Question 8

এই প্রশ্নের উপর দেওয়া অনুগ্রহ @ ডিজেচলিনের জবাবে, আমি @ ম্যাট-এইচ পোস্ট করা জেসফিডেলকে কাঁটাচামক করেছি এবং এই সিদ্ধান্তে পৌঁছেছি যে এটি এখনও সম্ভব নয়।

http://jsfiddle.net/gr3wo9u6/

//this does not work, the frames reload when appended back to the DOM
function swapFrames() {
    var w1 = document.getElementById('wrap1');
    var w2 = document.getElementById('wrap2');
    var f1 = w1.querySelector('iframe');
    var f2 = w2.querySelector('iframe');

    w1.removeChild(f1);
    w2.removeChild(f2);
    w1.appendChild(f2);
    w2.appendChild(f1);
    //f1.parentNode = w2;
    //f2.parentNode = w1;

    //alert(f1.parentNode.id);
}

Question 9

আপনি যদি নিয়ন্ত্রণ করেন এমন পৃষ্ঠাগুলি অ্যাক্সেসের জন্য iframe ব্যবহার করে থাকেন তবে পোস্টমেসেজের মাধ্যমে আপনার পিতামাতাকে iframe এর সাথে যোগাযোগ করার অনুমতি দেওয়ার জন্য কিছু জাভাস্ক্রিপ্ট তৈরি করতে পারেন

সেখান থেকে, আপনি রাষ্ট্রের পরিবর্তনগুলি রেকর্ড করতে iframe এর অভ্যন্তরে লগইন তৈরি করতে পারেন এবং ডম সরানোর আগে, জেসন বস্তু হিসাবে অনুরোধ করেছিলেন।

একবার সরানোর পরে, iframe পুনরায় লোড হবে, আপনি iframe এ রাষ্ট্রের তথ্য পাস করতে পারেন এবং iframe শ্রবণটি পূর্ববর্তী অবস্থায় ডেটা পার্স করতে পারে।