কীভাবে আমি জিকিউরি ব্যবহার করে একটি আইফ্রেমে বিষয়বস্তুটিকে গতিশীলভাবে পরিবর্তন করব?


89

আমি ভাবছিলাম যে যদি কোনও আইফ্রেমে এবং কিছু জ্যাকোয়ারি কোড রয়েছে যা প্রতি 30 সেকেন্ডে আইফ্রেমে সামগ্রী পরিবর্তন করে তবে কোনও সাইট পাওয়া সম্ভব কিনা? সামগ্রীটি বিভিন্ন ওয়েবপৃষ্ঠায় রয়েছে।

এটার মতো কিছু:

<html>
  <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script>
      $(document).ready(function(){
        var array = new array();
        array[0] = 'http://webPage1.com';
        array[1] = 'http://webPage2.com';
        // And so on.
        // Do something here to change the iframe every 30 second
      });
    </script>
  </head>
  <body>
    <iframe id="frame"></iframe>
  </body>
</html>

পোস্টের নীচের অংশটি দেখাচ্ছে না, তবে এটি ছিল একটি আইফ্রেমে বেসিক এইচটিএমএল।
অডুন

@ অদুন: আমি আপনার জন্য এটি স্থির করেছি; পরের বার, সবকিছু হাইলাইট করুন এবং কোড বোতামটি ব্যবহার করুন। এছাড়াও, ব্যবধানটি দুর্দান্ত।
geowa4

উক্ত জিনিস যেমন http://webPage1.comপ্রয়োজন হয়! //একটি মন্তব্য করতে হবে!
geowa4

উত্তর:


135
<html>
  <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script>
      $(document).ready(function(){
        var locations = ["http://webPage1.com", "http://webPage2.com"];
        var len = locations.length;
        var iframe = $('#frame');
        var i = 0;
        setInterval(function () {
            iframe.attr('src', locations[++i % len]);
        }, 30000);
      });
    </script>
  </head>
  <body>
    <iframe id="frame"></iframe>
  </body>
</html>

17
রিসাইক্লিং সহ অ্যারের মাধ্যমে পুনরাবৃত্তি করার উপায় হিসাবে [++ i% লেন] উজ্জ্বল! আমাকে শিখিয়েছে এক নতুন প্যাটার্ন! ধন্যবাদ!
rhh

8
নোট করুন যে সেটআইন্টারভাল ফাংশনের ভিতরে আপনাকে "$ (iframe) ব্যবহার করতে হবে না। বরং আপনি সরাসরি "iframe" করতে পারেন। কারণ আপনি ইতিমধ্যে উপরের কয়েকটি লাইন jQuery অবজেক্ট হিসাবে iframe তৈরি করেছেন। চিয়ার্স
মারিও আওয়াদ

যদি অন্তর্বর্তী সেট আপটি কীভাবে পরিবর্তনশীল হয়?
Yohanes এআই

তার পরিবর্তে সেটটাইমআউট ব্যবহার করুন
আনাতোলি

8

যদি আপনি কেবল যদি পরিবর্তন করতে চান যেখানে আইফ্রেমে ইফ্রিমের ভিতরে থাকা প্রকৃত সামগ্রীকে নির্দেশ করে না এবং আপনাকে কেবল srcবৈশিষ্ট্যটি পরিবর্তন করতে হবে ।

 $("#myiframe").attr("src", "newwebpage.html");

4
লোড () কোনও jQuery ফাংশন এইভাবে ব্যবহৃত হয় না।
লোডটি এজেএক্সের

লোড অ্যাজাক্সের জন্য নয়, দয়া করে @ হুরদা ডকুমেন্টেশনটি দেখুন ( api.jquery.com/load-event ) আপনি দেখতে পাবেন যে কোনও কিছু লোড হয়ে গেলেও লোড একটি হুক করতে ব্যবহৃত হয়। আপনি কোনও চিত্র সহ লোড ব্যবহার করতে পারেন। তবে, আপনার সাথে আমার একমত হতে হবে যে অ্যান্টনি যে ক্ষেত্রে সরবরাহ করে সে ক্ষেত্রেও এটি উপযুক্ত নয়।
প্যাট্রিক দেশজার্ডিনস

@ দোয়াক - আমি এখনও ভাবি যে তিনি api.jquery.com/load এজ্যাক্স লোড করেন - এটি কিছু সামগ্রী লোড করে। প্রকৃত পদ্ধতিটি পরামিতিগুলির উপর ভিত্তি করে বেছে নেওয়া হয়েছে - সুতরাং আমরা নিশ্চিত হতে পারি না। আমি শুধু কৌতূহলী কেন আপনি 11 মাস পরে আমাকে সংশোধন করার চেষ্টা করার প্রয়োজন বোধ করছেন?
হুরদা

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

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

4
var handle = setInterval(changeIframe, 30000);
var sites = ["google.com", "yahoo.com"];
var index = 0;

function changeIframe() {
  $('#frame')[0].src = sites[index++];
  index = index >= sites.length ? 0 : index;
}
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.