jquery를 사용하여 iframe의 콘텐츠를 동적으로 변경하려면 어떻게해야합니까?

30 초마다 iframe 콘텐츠를 변경하는 iframe과 일부 jquery 코드가있는 사이트를 가질 수 있는지 궁금합니다. 콘텐츠가 다른 웹 페이지에 있습니다.

이 같은:

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

jquery iframe

— Audun
소스

게시물 하단은 표시되지 않지만 iframe이있는 기본 html이었습니다.

— Audun

@Audun : 나는 당신을 위해 그것을 고쳤습니다; 다음에 모든 것을 강조 표시하고 코드 버튼을 사용하십시오. 또한 간격이 멋지다.

— geowa4 2010 년

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>

— 아나톨리
소스

재활용을 통해 배열을 반복하는 방법으로 [++ i % len]은 훌륭합니다! 그것은 나에게 새로운 패턴을 가르쳐주었습니다! 감사!

— rhh

setInterval 함수 내에서 "$ (iframe)"을 사용할 필요가 없습니다. 오히려 직접 "iframe"을 사용할 수 있습니다. 이미 몇 줄 위의 jQuery 객체로 iframe을 만들었 기 때문입니다. 건배.

— Mario Awad 2012

간격 설정이 동적으로 변경되면 어떻게합니까?

— Yohanes AI

대신 setTimeout 사용

— Anatoliy

iframe 내부의 실제 콘텐츠가 아닌 iframe이 가리키는 위치 만 변경하려면 src속성 만 변경하면 됩니다.

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

— 안토니
소스

load ()는 이런 방식으로 사용되는 jQuery 함수가 아닙니다. AJAX 용로드

— Hurda 2010

로드는 Ajax 용이 아닙니다. @Hurda는 문서 ( api.jquery.com/load-event )를 참조하십시오.로드가 완료 되어도로드가 후크에 사용되는 것을 볼 수 있습니다. 이미지와 함께로드를 사용할 수 있습니다. 그러나 Anthony가 제공하는 경우에도 적절하지 않다는 것에 동의해야합니다.

— Patrick Desjardins

@Doak-나는 여전히 그가 api.jquery.com/load ajax load를 멘션 했다고 생각합니다 -그것은 일부 콘텐츠를로드합니다. 실제 방법은 매개 변수에 따라 선택되므로 확신 할 수 없습니다. 11 개월 후에 왜 나를 바로 잡으려고 노력해야하는지 궁금합니다.

— Hurda

글쎄요, 저는 당신 둘 사이에서 확신합니다. 둘 다 맞습니다. jquery를 만진 지 너무 오래되어서로드가 무엇을하는지 기억이 나지 않습니다. 25 개월 전에 답변을 썼을 때 load()창이나 문서 개체를 다시로드하는 데 사용할 수있는 인상을 받았다고 확신 합니다. 내가 말했듯이, 나는 그것이 실제로 무엇을하는지 더 이상 기억할 수 없습니다. 전반적으로 저는 단순하고 동일 출처 정책을 협상 할 필요가없는 옵션을 제시하려고했습니다.

— Anthony

사실, 내가 어떤 방법을 의미하는지 추측하는 것은 꽤 우스운 Hurda라고 생각합니다. 왜냐하면 그들 중 누구도 내가 제안한 것을 실제로 성취하지 못하기 때문입니다. 아약스를위한 메서드가 이벤트 바인딩을위한 메서드가 다시로드 할 것이라고 생각하는 것보다 더 많은 iframe을 다시로드한다고 생각하는 이유는 무엇입니까? 어쨌든, 나는 아마도 순수한 js와 바인딩에 "onblah"를 사용하고 이벤트를 발생시키기 위해 "blah"를 사용하는 방법을 생각하고 있었을 것입니다. 어느 쪽이든이 방법은 iframe을 다시로드하지 않으므로 내 대답을 편집했습니다.

— Anthony

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

— 거와 4
소스