>웹 프론트엔드 >JS 튜토리얼 >Chrome 확장 프로그램에서 \'원형 구조를 JSON으로 변환\' 오류를 해결하는 방법은 무엇입니까?

Chrome 확장 프로그램에서 \'원형 구조를 JSON으로 변환\' 오류를 해결하는 방법은 무엇입니까?

Patricia Arquette
Patricia Arquette원래의
2024-11-29 01:18:14693검색

How to Solve the

Chrome 확장 프로그램의 오류 처리: "순환 구조를 JSON으로 변환" 문제 해결

Chrome 확장 프로그램을 사용할 때 흔히 발생하는 문제 데이터 직렬화와 관련된 오류. 이러한 오류 중 하나는 chrome.extension.sendRequest를 사용하는 동안 발생하는 "TypeError: 원형 구조를 JSON으로 변환 중"입니다. 이는 요청에 순환 참조가 있는 개체가 포함되어 JSON 직렬화를 방지하는 경우에 발생합니다.

제공된 코드 조각에서 요청 개체에는 pagedoc 속성이 포함되어 있습니다. 이 변수는 DOM 노드를 나타낼 가능성이 높습니다. JavaScript의 DOM 노드에는 순환 참조가 있으며 이는 JSON 직렬화에 문제가 있습니다.

DOM의 순환 참조 이해

DOM 노드에는 다음과 같은 이유로 고유한 순환 참조가 있습니다.

  • 각 노드에는 다음을 참조하는 ownerDocument 속성이 있습니다. document.
  • document.body를 통해 DOM 트리에 대한 참조가 있는 문서입니다.
  • document.body.ownerDocument는 해당 문서를 다시 참조합니다.

결과적으로 순환 참조를 무기한 순회하려고 시도하기 때문에 JSON 직렬화가 실패합니다.

해결책: 순환 참조 해결

이 문제를 해결하려면 요청 개체를 보내기 전에 요청 개체의 순환 참조를 끊을 수 있습니다. DOM 노드는 계층적이므로 순환 참조 없이 계층 관계를 나타내는 새 객체를 생성할 수 있습니다.

var newObj = {
  id: pagedoc.id,
  children: []
};
for (var i = 0; i < pagedoc.children.length; i++) {
  newObj.children.push({
    id: pagedoc.children[i].id,
    ... // Continue building the nested structure without circular references
  });
}

요청 객체의 pagedoc를 newObj로 교체하여 순환 참조를 제거합니다.

chrome.extension.sendRequest({
  req: "getDocument",
  docu: newObj,
  name: 'name'
}, function(response){
  var efjs = response.reply;
});

순환 참조를 깨면 이제 요청 개체를 성공적으로 직렬화하고 확장 프로그램으로 보낼 수 있습니다. 그러면 확장 프로그램이 요청을 처리하고 "순환 구조를 JSON으로 변환 중" 오류가 발생하지 않고 예상되는 응답을 제공할 수 있습니다.

위 내용은 Chrome 확장 프로그램에서 \'원형 구조를 JSON으로 변환\' 오류를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.