2010-12-19 5 views
0

는 다음과 같은 HTML 고려 : (구글 크롬에 대한 글)의 iframe 그리고 뒤로 버튼

<html> 
    <head> 
    <script language="javascript"> 
     function AddToIFrame(){ 
     var Frame=document.getElementById("BackTest").contentWindow.document; 
     Frame.open(); 
     Frame.write(Math.random()); 
     Frame.close(); 
     } 
    </script> 
    </head> 
    <body> 
    <iframe id="BackTest" name="BackTest" width="100%" height="222"></iframe> 
    <a href="javascript:AddToIFrame();">Add To IFrame</a> 
    <p>How Can I Modify This HTML So That After Clicking The Link Above, I Can Use The Back Button To Go To Previous IFrame Content?</p> 
    </body> 
</html> 

링크를 클릭 할 때마다, iframe이 내용이 변경됩니다. 위대한 작품 - 내 목적을 위해 iframe 콘텐츠를 변경하려면 document.write 사용해야합니다.

내 문제는 iframe의 이전 내용이 뒤로 돌아가도록하려는 것입니다. 많은 다른 페이지에서와 마찬가지로. 이 예제에서는 어떻게 되겠지만, 뒤로 버튼을 클릭하면 이전 주 페이지로 이동합니다.

iframe의 기록이 만료되고 메인 페이지에서 "뒤로"돌아갈 때까지 뒤로 버튼으로 인해 iframe이 되돌아 가도록하려면 어떻게해야합니까?

+1

"반드시 document.write를 사용해야합니다"? – ephemient

+0

렌더링 할 HTML을 나타내는 URL이 없으므로 JavaScript에서 동적으로 HTML을 생성합니다. – Joshua

+0

원시 document.write보다 훨씬 뛰어난 DOM 조작 기술이 많이 있습니다. 무엇보다도 노드를 복사하고 저장하고 이동하고 제거 할 수 있습니다. – ephemient

답변

0

일부 새로운 HTML5 기능을 사용하기 쉽습니다.

<html> 
    <head> 
    <script> 
     var inner; 
     window.addEventListener('load', function() { 
     inner = document.getElementById('inner').contentWindow; 
     inner.document.open(); 
     inner.document.write(
      "\x3cscript\x3e" + 
      "var contents = document.getElementById('contents');" + 
      "window.addEventListener('load', function() {" + 
       "contents = document.getElementById('contents');" + 
      "}, false);" + 
      "window.addEventListener('message', function(e) {" + 
       "history.pushState(e.data, '', '');" + 
       "contents.value = e.data;" + 
      "}, false);" + 
      "window.addEventListener('popstate', function(e) {" + 
       "contents.value = e.state;" + 
      "}, false);" + 
      "\x3c/script\x3e" + 
      '\x3ctextarea id="contents" readonly\x3e\x3c/textarea\x3e' 
     ); 
     inner.document.close(); 
     }, false); 
     function messageInner() { 
     inner.postMessage(Math.random(), '*'); 
     } 
    </script> 
    </head> 
    <body> 
    <iframe id="inner"></iframe> 
    <a href="#" onclick="messageInner(); return false">Clickety</a> 
    </body> 
</html> 

document.write은 실제로 사용하지 않아야합니다. 그 내부 스크립트로 자신의 페이지 (<iframe src="…">)를 호스트하십시오.

0

나는 그것이 당신이 찾고있는 대답이 아니라는 것을 알고있다. 그러나 나는 이것이 가능하다고 생각하지 않는다. 왜냐하면 뒤로 버튼은 자바 스크립트가 아닌 브라우저에 의해 제어되기 때문이다.

당신은

window.location.href = 'http://www.youradress.com/yourpage?iframeurl=' + iframeurl; 

을 할 수 있고 pageload에 당신은 쿼리 문자열

이런 식으로 URL을 iframe을로드 사용자가 버튼을 클릭 할 때까지 코드를 수정할 수, 당신은 전체 수 페이지로드가 발생하고 URL은 기록에 남고 뒤로 버튼은 원하는대로 작동합니다.

1

Frame.open('text/html', 'replace'); 대신에 Frame.open();을 사용하십시오.