UFO ET IT

기록에 추가하지 않고 IFRAME 다시로드

ufoet 2020. 11. 26. 20:25
반응형

기록에 추가하지 않고 IFRAME 다시로드


나는 그것을 src다시로드하기 위해 IFRAME을 변경하고 있으며, 잘 작동 onload하고 HTML 이로 드 될 때 이벤트를 발생시킵니다.

그러나 그것은 내가 원하지 않는 역사에 항목을 추가합니다. IFRAME을 다시로드하지만 기록에 영향을주지 않는 방법이 있습니까?


javascript를 사용할 수 있습니다 location.replace.

window.location.replace('...html');

현재 문서를 제공된 URL에있는 문서로 바꿉니다. assign () 메서드와 다른 점은 replace ()를 사용한 후에는 현재 페이지가 세션 기록에 저장되지 않는다는 것입니다. 즉, 사용자가 뒤로 단추를 사용하여 해당 페이지로 이동할 수 없다는 의미입니다.


replace () 사용은 자체 도메인 iframe에 대한 옵션 일뿐입니다. 원격 사이트 (예 : 트위터 버튼)에서 작동하지 않으며 자식 창에 안정적으로 액세스하려면 브라우저 별 지식이 필요합니다.

대신 iframe 요소를 제거하고 동일한 위치에 새 요소를 구성하십시오. 기록 항목은 srcDOM에있는 속성 을 수정 한 경우에만 생성 되므로 추가하기 전에 설정해야합니다.

편집 : JDandChips는 DOM에서 제거하고 수정하고 다시 추가 할 수 있다고 올바르게 언급합니다. 새로 구축 할 필요가 없습니다.


Greg가 위에서 말했듯이 .replace () 함수는이를 수행하는 방법입니다. 그의 답변 *에 응답하는 방법을 알아낼 수없는 것 같지만 트릭은 iFrames contentWindow 속성을 참조하는 것입니다.

var ifr = document.getElementById("iframeId");
ifr.contentWindow.location.replace("newLocation.html"); 

* 답변에 대해 언급하려면 더 많은 평판이 필요하다는 것을 방금 알게되었습니다.


iframe을 다시 만드는 다른 방법은 DOM에서 iframe을 제거하고 src를 변경 한 다음 다시 추가하는 것입니다.

여러면에서 이것은 replace()제안 과 유사 하지만 History.js로 이러한 접근 방식을 시도하고 상태를 수동으로 관리 할 때 몇 가지 문제가있었습니다.

var container = iframe.parent();

iframe.remove();
iframe.attr('src', 'about:blank');

container.append(iframe);

한 가지 해결책은 object태그가 아닌 태그 를 사용하는 iframe입니다.

이것을 대체 :

<iframe src="http://yourpage"/>

이로 인해:

<object type="text/html" data="http://yourpage"/>

data기록에 영향을주지 않고 속성 을 업데이트 할 수 있습니다 . React.jsDOM을 업데이트하기 위해 명령형 명령을 수행하지 않아야하는 경우 와 같은 선언적 프레임 워크를 사용하는 경우 유용합니다 .

사이의 차이점에 대한 자세한 내용 iframeobject: 다른에 포함 된 웹 페이지에 iframe이 또는 개체 태그의 사용


이 기능을 사용하여 이전 iframe을 이전 iframe에서 복사 한 새 iframe으로 바꾸십시오.

function setIFrameSrc(idFrame, url) {
    var originalFrame = document.getElementById(idFrame);
    var newFrame = document.createElement("iframe");
    newFrame.id = originalFrame.getAttribute("id");
    newFrame.width = originalFrame.getAttribute("width");
    newFrame.height = originalFrame.getAttribute("height");
    newFrame.src = url;    
    var parent = originalFrame.parentNode;
    parent.replaceChild(newFrame, originalFrame);
}

다음과 같이 사용하십시오.

setIFrameSrc("idframe", "test.html");

이렇게하면 iframe의 URL이 브라우저 기록에 추가되지 않습니다.


replace방법을 사용하여 iframe의 URL을 기록에 추가하지 않습니다.

HTML :

<iframe id="myIframe" width="100%" height="400" src="#"></iframe>

자바 스크립트 :

var ifr = document.getElementById('mIframe')
if (ifr) {
  ifr.contentWindow.location.replace('http://www.blabla.com')
}

가장 간단하고 빠른 로딩 솔루션 페이지 나 프레임을 로딩 할 때 히스토리를 업데이트하지 않기 위해
사용 window.location.replace합니다.

링크의 경우 다음과 같습니다.

<a href="#" onclick="YourTarget.location.replace ('http://www.YourPage.com');">
The targeted Link</a>

또는

<a href="javascript:YourTarget.location.replace ('http://www.YourPage.com');">
The targeted Link</a>



그러나 링크에서 작동하지 않고 프레임을로드 할 때 자동으로 작동하도록하려면 iframe에서 iframe 파일 본문 섹션에 넣어야합니다.

onload="window.location.replace ('http://www.YourPage.com');"


어떤 이유로 onload가 iframe에서로드되지 않는 경우 다음과 같은 구문에 window 대신 대상 프레임 이름을 입력합니다.

onload="YourTarget.location.replace ('http://www.YourPage.com');"



참고 : 이 스크립트는 모두를 위해 onclick, onmouseover, onmouseout, onloadhref="javascript:"작동합니다.


JDandChips 답변은 교차 원본 iframe (youtube)에서 저에게 효과적이었습니다. 여기에는 바닐라 JS (JQuery 제외)가 있습니다.

const container = iframe.parentElement;

container.removeChild(iframe);

iframe.setAttribute('src', 'about:blank');

container.appendChild(iframe);

참고URL : https://stackoverflow.com/questions/821359/reload-an-iframe-without-adding-to-the-history

반응형