কোনও আইফ্রেম পুনরায় লোড / রিফ্রেশ করার সর্বোত্তম উপায় কী?


241

আমি <iframe>জাভাস্ক্রিপ্ট ব্যবহার করে একটি পুনরায় লোড করতে চাই । এখন অবধি আমি যেভাবে খুঁজে পেয়েছি তার মধ্যে ইফ্রেমের srcবৈশিষ্ট্যটি নিজের মধ্যে সেট করা ছিল তবে এটি খুব পরিষ্কার নয়। কোন ধারনা?


4
srcনিজের কাছে এ্যাট্রিবিউট সেট করা শুদ্ধ না হওয়ার কোনও কারণ আছে কি ? এটি একমাত্র সমাধান বলে মনে হচ্ছে যা ব্রাউজারগুলি এবং ডোমেনগুলিতে কাজ করে
mirhagk

srcঅ্যাট্রিবিউটটিকে নিজের কাছে সেট করা সমস্যার কারণ হয়ে থাকে যদি আপনার অন্য কোনও লিঙ্ক থাকে যা লক্ষ্যবস্তুকে লক্ষ্য করে <iframe>। তারপরে ফ্রেমটি প্রাথমিকভাবে নকশা করা হিসাবে প্রাথমিক পৃষ্ঠাটি প্রদর্শন করবে।
ই ভ্যান পুটেন

উত্তর:


222
document.getElementById('some_frame_id').contentWindow.location.reload();

ফায়ারফক্সে সাবধান থাকুন, window.frames[]আইডি দ্বারা ইন্ডেক্স করা যাবে না, নাম বা সূচী দ্বারা


26
আসলে, ক্রোমে আমার কাছে এই পদ্ধতির কাজ হয়নি। কোনও 'কন্টেন্টউইন্ডো' সম্পত্তি ছিল না। যদিও ডকুমেন্ট.জেটএলমেন্টবিআইআইডি ('কিছু_ফ্রেম_আইডি') ব্যবহার করা সম্ভব ছিল location অবস্থান.রেলোড (); ।। পদ্ধতি উভয় মুক্তিযোদ্ধা এবং Chrome কাজ document.getElementById ( 'iframeid') src = document.getElementById ( 'iframeid') src ছিল
মাইক Bevz

1
@ মাইকবেয়েজ অবস্থান করতে পারে? জ্যাকারি নির্বাচনকারী ব্যবহার করে পুনরায় লোড অ্যাক্সেসযোগ্য?
জিতেন্দ্র মাহলাওয়াত

2
নিখুঁত এটি কাজ, কিন্তু একই ডোমেন উত্স নীতি == এ
ববি স্টেনলি

6
frames[1].location.href.reload()এবং window.frames['some_frame_id'].location.href.reload()এটিও ব্যবহার করা যেতে পারে
ড্যানিয়েল ডব্লিউ ক্রম্পটন

1
আপনি যদি iframe উইন্ডো অ্যাক্সেস করতে না পারেন তবে আপনাকে iframe ট্যাগের src বৈশিষ্ট্য পরিবর্তন করতে হবে।
ম্যাকিয়েজ ক্রাওকিজিক

194
document.getElementById('iframeid').src = document.getElementById('iframeid').src

এটি iframeএমনকি, ডোমেনগুলিতেও পুনরায় লোড করবে ! আই 7/8, ফায়ারফক্স এবং ক্রোম দিয়ে পরীক্ষিত।


68
document.getElementById('iframeid').src += '';এছাড়াও কাজ করে: jsfiddle.net/Daniel_Hug/dWm5k
ওয়েব_ডিজাইনার

3
এবং পৃষ্ঠায় যুক্ত হওয়ার পরে যদি ইফ্রামের উত্স পরিবর্তিত হয় তবে আপনি ঠিক কী করবেন ?
নিট দ্য ডার্ক আবসোল

ক্রোম ver33 এ আমার জন্য কাজ করে! অদ্ভুত যে আমরা কেবল ব্যবহার করতে পারি না reloadতবে এটি অনুমোদিত।
লুক

8
মনে রাখবেন যে যদি iframe src এর মধ্যে একটি হ্যাশ থাকে (উদাহরণস্বরূপ http://example.com/#something), এটি ফ্রেমটি পুনরায় লোড করবে না। আমি ?v2হ্যাশের আগে ইউআরএলের মতো নিক্ষিপ্ত ক্যোয়ারী প্যারামিটার যুক্ত করার পদ্ধতিকে ব্যবহার করেছি ।
ব্যবহারকারী 85461

এটি iframe শীর্ষে ফিরে স্ক্রোল কারণ।
মিস্টারটক্স

60

JQuery ব্যবহার করা হলে, এটি কাজ করে বলে মনে হচ্ছে:

$('#your_iframe').attr('src', $('#your_iframe').attr('src'));

আমি আশা করি এটি স্ট্যাকওভারফ্লোটির জন্য খুব কুৎসিত নয়।


6
এটি, jQuery ছাড়াই: var iframe = document.getElementById("your_iframe"); iframe.src = src;
সিগ্রাস

দয়া করে ভবিষ্যতের যে কোনও লোককে মনে রাখবেন যে এটি (এবং প্লেইন জেএস সমাধান) ব্যবহার করা সবচেয়ে ভাল কারণ এটি ক্রস প্ল্যাটফর্ম এবং ডোমেনগুলি জুড়ে কাজ করে।
মিরহাক্ক

13
@ সিগ্রাস আমি মনে করি আপনার অর্থ:var iframe = document.getElementById("your_iframe"); iframe.src = iframe.src;
ম্যাক্সিমাম

15

খালি স্থান যুক্ত করুন স্বয়ংক্রিয়ভাবে আইফ্রেম পুনরায় লোড করুন।

document.getElementById('id').src += '';


8

কারণ একই উৎপত্তি নীতি , এই একটি ভিন্ন ডোমেইনে একটি iframe ইশারা পরিবর্তন কাজ করবে না। আপনি যদি নতুন ব্রাউজারগুলিকে লক্ষ্য করতে পারেন তবে এইচটিএমএল 5 এর ক্রস ডকুমেন্ট মেসেজিং ব্যবহার করে বিবেচনা করুন । আপনি এখানে ব্রাউজারগুলি দেখুন যা এই বৈশিষ্ট্যটিকে সমর্থন করে: http://caniuse.com/#feat=x-doc-messaging

আপনি যদি এইচটিএমএল 5 কার্যকারিতা ব্যবহার করতে না পারেন, তবে আপনি এখানে বর্ণিত কৌশলগুলি অনুসরণ করতে পারেন: http://softwareas.com/cross-domain-communication-with-iframes । এই ব্লগ এন্ট্রি সমস্যা সংজ্ঞায়িত করতে একটি ভাল কাজ করে।


7

আমি ক্রোমে এইটির বিরুদ্ধে এসেছি এবং কেবলমাত্র যা কাজ করেছিল তা ছিল iframe অপসারণ এবং প্রতিস্থাপন করা। উদাহরণ:

$(".iframe_wrapper").find("iframe").remove();
var iframe = $('<iframe src="' + src + '" frameborder="0"></iframe>');
$.find(".iframe_wrapper").append(iframe);

খুব সহজ, অন্য উত্তরে .াকা নেই।


4

নতুন ইউআরএল জন্য

location.assign("http:google.com");

অ্যাসাইন () পদ্ধতিটি একটি নতুন দস্তাবেজ লোড করে।

রিলোড

location.reload();

পুনরায় লোড () পদ্ধতিটি বর্তমান নথিটি পুনরায় লোড করতে ব্যবহৃত হয়।


4

কেবল srcআইফ্রেমে উপাদানটির বৈশিষ্ট্যটি প্রতিস্থাপন করা আমার ক্ষেত্রে সন্তোষজনক ছিল না কারণ নতুন পৃষ্ঠাটি লোড না হওয়া পর্যন্ত কেউ পুরানো সামগ্রী দেখতে পাবে। আপনি তাত্ক্ষণিক চাক্ষুষ প্রতিক্রিয়া দিতে চাইলে এটি আরও ভাল কাজ করে:

var url = iframeEl.src;
iframeEl.src = 'about:blank';
setTimeout(function() {
    iframeEl.src = url;
}, 10);

আমি ঠিক একই পদ্ধতির পরীক্ষা করেছি কিন্তু সেটটাইমআউট ছাড়াই - এবং এটি আমার পক্ষে কাজ করে। আসলে, শুধু iframe.setAttribute ('src', iframe.getAttribute ('src'))
বনবনেজ

3

যজ্ঞের পোস্টে একটি পরিমার্জন ... আমি চিন্তাটি পছন্দ করি তবে ব্রাউজার সনাক্তকরণের ধারণাটিকে ঘৃণা করি।

আমি বরং ব্রাউজার সনাক্তকরণের পরিবর্তে অবজেক্ট সনাক্তকরণ, ( http://www.quirksmode.org/js/support.html ) ব্যবহারের বিষয়ে পিপিকে দৃষ্টিভঙ্গি গ্রহণ করি , কারণ তখন আপনি প্রকৃতপক্ষে ব্রাউজারের ক্ষমতাগুলি পরীক্ষা করছেন এবং সেই অনুযায়ী অভিনয় করছেন আপনি কি মনে করেন যে ব্রাউজারটি সেই সময়ে সক্ষম। এছাড়াও এত কুৎসিত ব্রাউজার আইডি স্ট্রিং পার্সিংয়ের প্রয়োজন হয় না এবং পুরোপুরি সক্ষম ব্রাউজারগুলি বাদ দেয় না যার সম্পর্কে আপনি কিছুই জানেন না।

সুতরাং, নেভিগেটর.অ্যাপনামের দিকে তাকানোর পরিবর্তে, আপনি ব্যবহার করছেন এমন উপাদানগুলির জন্য প্রকৃতপক্ষে কেন পরীক্ষা করছেন না? (আপনি এমনকি ফ্যানসিয়ার পেতে চাইলে আপনি try} ব্লকগুলি ব্যবহার করতে পারেন তবে এটি আমার পক্ষে কার্যকর হয়েছে worked)

function reload_message_frame() {
    var frame_id = 'live_message_frame';
    if(window.document.getElementById(frame_id).location ) {  
        window.document.getElementById(frame_id).location.reload(true);
    } else if (window.document.getElementById(frame_id).contentWindow.location ) {
        window.document.getElementById(frame_id).contentWindow.location.reload(true);
    } else if (window.document.getElementById(frame_id).src){
        window.document.getElementById(frame_id).src = window.document.getElementById(frame_id).src;
    } else {
        // fail condition, respond as appropriate, or do nothing
        alert("Sorry, unable to reload that frame!");
    }
}

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

আইই 8, ফায়ারফক্স (15.0.1), ক্রোম (21.0.1180.89 মি) এবং উইন্ডোতে অপেরা (12.0.2) এ আমার জন্য কাজ করেছে।

সম্ভবত আমি পুনরায় লোড ফাংশনটির জন্য পরীক্ষার মাধ্যমে আরও ভাল করতে পেরেছিলাম তবে এখনই এটি আমার পক্ষে যথেষ্ট। :)


3

এখন ক্রোম 66 66 এ এই কাজটি করতে, এটি ব্যবহার করে দেখুন:

const reloadIframe = (iframeId) => {
    const el = document.getElementById(iframeId)
    const src = el.src
    el.src = ''
    setTimeout(() => {
        el.src = src
    })
}

2

IE8। নেট ব্যবহার করে, iframe.srcপ্রথমবারের জন্য সেটিংস ঠিক করা ঠিক আছে, তবে iframe.srcদ্বিতীয়বারের জন্য সেটিংস স্থাপন করা page_loadiframed পৃষ্ঠাটির উত্থাপন করছে না । এটি সমাধান করার জন্য আমি ব্যবহার করেছি iframe.contentDocument.location.href = "NewUrl.htm"

JQuery ঘনবক্স ব্যবহার করার সময় এটি আবিষ্কার করুন এবং পুরুবাক্সে iframe এ একই পৃষ্ঠাটি আবার খোলার চেষ্টা করবেন। তারপরে এটি খালি যে পূর্ববর্তী পৃষ্ঠাটি দেখিয়েছিল।


2

আইইয়ের জন্য পুনরায় লোড ব্যবহার করুন এবং অন্যান্য ব্রাউজারগুলির জন্য এসসিআর সেট করুন। আইই 7,8,9 এবং ফায়ারফক্সে পরীক্ষিত (পুনরায় লোড এফএফের সাথে কাজ করে না)

if(navigator.appName == "Microsoft Internet Explorer"){
    window.document.getElementById('iframeId').contentWindow.location.reload(true);
}else {
    window.document.getElementById('iframeId').src = window.document.getElementById('iframeId').src;
}

2

আপনি যদি জিকিউরি ব্যবহার করেন তবে একটি লাইন কোড রয়েছে।

$('#iframeID',window.parent.document).attr('src',$('#iframeID',window.parent.document).attr('src'));

এবং যদি আপনি একই পিতামাতার সাথে কাজ করছেন

$('#iframeID',parent.document).attr('src',$('#iframeID',parent.document).attr('src'));

1

যদি উপরের সমস্তগুলি আপনার পক্ষে কাজ করে না:

window.location.reload();

এটি কোনও কারণে পুরো স্ক্রিপ্টের পরিবর্তে আমার আইফ্রেমকে সতেজ করে। সম্ভবত এটি ফ্রেমের মধ্যেই স্থাপন করা হয়েছে, আপনি যখন অন্য ফ্রেম থেকে কোনও ফ্রেম রিফ্রেশ করার চেষ্টা করেন তখন এই সমস্ত getElemntById সমাধানগুলি কাজ করে?

বা আমি এটি পুরোপুরি বুঝতে পারি না এবং জিবির কথা বলি না, যাইহোক এটি আমার জন্য কবজির মতো কাজ করেছে :)


1

আপনি কি ইউআরএলকে অর্থহীন ক্যোয়ারিং স্ট্রিং প্যারামিটার যুক্ত করার বিষয়টি বিবেচনা করেছেন?

<iframe src="myBaseURL.com/something/" />

<script>
var i = document.getElementsById("iframe")[0],
    src = i.src,
    number = 1;

//For an update
i.src = src + "?ignoreMe=" + number;
number++;
</script>

এটি দেখা যাবে না এবং যদি আপনি প্যারামিটারটি নিরাপদ থাকার বিষয়ে সচেতন হন তবে এটি ঠিক করা উচিত।


1

আর একটি সমাধান।

const frame = document.getElementById("my-iframe");

frame.parentNode.replaceChild(frame.cloneNode(), frame);

এর একটি অসুবিধা হ'ল মূল ডকুমেন্ট ডিওএম ট্রিটিকে সংশোধন করে এবং পুনরায় রঙের কারণ ঘটায়। আমি ব্যবহার করেছিvar url = ifr.src; ifr.src = null; ifr.src = url;
পকেটস্যান্ড

আমি মনে করি যে একটি আইফ্রেমে পুনরায় লোড করা সর্বদা পুনরায় রঙের কারণ হিসাবে ব্যবহার করা কোডের কোনও বিষয় নয়।
ভ্যাসিল আলেকজান্দ্রু পেরেটে

1

ব্যবহার self.location.reload()করে iframe পুনরায় লোড করা হবে।

<iframe src="https://vivekkumar11432.wordpress.com/" width="300" height="300"></iframe>
<br><br>
<input type='button' value="Reload"  onclick="self.location.reload();" />


1
এটি পুরো মূল উইন্ডোটি পুনরায় লোড করুন
পেরি মিমন

0
<script type="text/javascript">
  top.frames['DetailFrame'].location = top.frames['DetailFrame'].location;
</script> 

1
আমি যে পছন্দটি ব্যবহার করব তা নয় তবে আমি এটি অনুমান করি। কিছু অতিরিক্ত কোড সহ যা আপনি যুক্ত করতে পারতেন
ট্রান্সিলভ্ল্যাড

0

আপনি যদি অন্য সমস্ত পরামর্শের চেষ্টা করে থাকেন এবং সেগুলির কোনওটিই কাজ করতে না পারা (যেমন আমি পারি না), এখানে এমন কিছু যা আপনি চেষ্টা করতে পারেন তা কার্যকর হতে পারে।

এইচটিএমএল

<a class="refresh-this-frame" rel="#iframe-id-0">Refresh</a>
<iframe src="" id="iframe-id-0"></iframe>

জাতীয়

$('.refresh-this-frame').click(function() {
    var thisIframe = $(this).attr('rel');
    var currentState = $(thisIframe).attr('src');
    function removeSrc() {
        $(thisIframe).attr('src', '');
    }
    setTimeout (removeSrc, 100);
    function replaceSrc() {
        $(thisIframe).attr('src', currentState);
    }
    setTimeout (replaceSrc, 200);
});

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

আমার নোট করা উচিত যে আমি বর্তমানে যে প্রকল্পে কাজ করছি, এটি এই পরীক্ষার শয্যাতে ব্যবহৃত একটি হ'ল এক পৃষ্ঠার সাইট যা সূচীযুক্ত অবস্থানগুলি (যেমন সূচক। Html # বাড়ি) সহ। আমার বিশেষ ফ্রেমটি রিফ্রেশ করার জন্য কেন আমি অন্য কোনও সমাধান পেতে পারি নি তার সাথে এটির কিছু ছিল।

এটি বলার পরে, আমি জানি এটি বিশ্বের সবচেয়ে পরিষ্কার জিনিস নয়, তবে এটি আমার উদ্দেশ্যে কাজ করে। আশা করি এটি কাউকে সাহায্য করবে। এখন কেবল যদি আমি বুঝতে পারি যে প্রতিবার যদি আইফ্রেমের ভিতরে অ্যানিমেশন থাকে তখন পিতামাতার পৃষ্ঠাটি স্ক্রল করা থেকে কীভাবে আইফ্রেমটি রাখা যায় ...

সম্পাদনা: আমি বুঝতে পেরেছিলাম যে এটি ইফ্রেমে "রিফ্রেশ" করে না আমি আশা করি এটি করা উচিত। এটি যদিও iframe এর প্রাথমিক উত্স পুনরায় লোড করবে। আমি কেন কাজ করতে অন্য বিকল্পগুলির কোনও কেন পাইনি তা এখনও বুঝতে পারি না ..

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

সংযুক্ত জেএস

$('.refresh-this-frame').click(function() {
    var targetID = $(this).attr('rel');
    var targetSrc = $(targetID).attr('src');
    var cleanID = targetID.replace("#","");     
    var chromeTest = ( navigator.userAgent.match(/Chrome/g) ? true : false );
    var FFTest = ( navigator.userAgent.match(/Firefox/g) ? true : false );      
    if (chromeTest == true) {
        function removeSrc() {
            $(targetID).attr('src', '');
        }
        setTimeout (removeSrc, 100);
        function replaceSrc() {
            $(targetID).attr('src', targetSrc);
        }
        setTimeout (replaceSrc, 200);
    }
    if (FFTest == true) {
        function removeSrc() {
            $(targetID).attr('src', '');
        }
        setTimeout (removeSrc, 100);
        function replaceSrc() {
            $(targetID).attr('src', targetSrc);
        }
        setTimeout (replaceSrc, 200);
    }       
    if (chromeTest == false && FFTest == false) {
        var targetLoc = (document.getElementById(cleanID).contentWindow.location).toString();
        function removeSrc() {
            $(targetID).attr('src', '');
        }
        setTimeout (removeSrc, 100);
        function replaceSrc2() {
            $(targetID).attr('src', targetLoc);
        }
        setTimeout (replaceSrc2, 200);
    }
});

0

ডিবাগিংয়ের উদ্দেশ্যে যে কেউ কনফোলটি খুলতে পারে তা বাস্তবায়নের প্রসঙ্গে ফ্রেমে পরিবর্তন করতে পারে যা সে রিফ্রেশ এবং করতে চায় document.location.reload()

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.