React에서 HTML 프레임 사용
<frame>이 재미있는 HTML 라벨이 인터넷에서 사라지는 시간은 대략 <marquee>, 지리도시, 게시판 페이지, 애니메이션'건설 중'인 GIF와 웹1.0의 다른 내용과 같다.React 구성 요소를 HTML
<frame> 로 표시할 수 있는지 보고 싶습니다.다음은 최종 결과입니다.프레임 101
유일하게 액자 위의 서류보다 찾기 어려운 것은 대유행이 시작되었을 때의 휴지다.다음은 이들이 어떻게 일을 하는지에 대한 빠른 복습이다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>A simple frameset document</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAME name="menu" src="menu.html">
<FRAME name="content" src="content.html">
</FRAMESET>
</HTML>
프레임은 <frameset> 내에 있어야 합니다. 이 탭은 <body> 탭을 바꾸고 프레임을 줄 및/또는 열로 나누는 방법을 정의합니다.rows 및 cols 속성은 백분율, 절대수(픽셀 단위) 또는 별표로 나머지 공간을 사용하도록 표시할 수 있습니다.프레임세트는 여러 개의 구분자가 있는 레이아웃을 만들기 위해 서로 중첩될 수 있습니다.
프레임과 프레임셋을 사용하면 제목과 네비게이션 메뉴와 같은 페이지 부분에 보이는 레이아웃을 만들고 사이트의 주요 내용을 바꿀 수 있습니다.
프레임에는 하이퍼링크에서 프레임의 내용을 바꿀 수 있는 속성name이 있습니다.
<a href="page2.html" target="content">Go to page 3</a>
그들은 어디로 갔습니까?
나는 몇 년 전에 웹 사이트를 틀로 만들었던 것을 기억한다. 나는 그것들에게 무슨 일이 일어났는지 알고 싶다.요컨대 <frame> 요소는 HTML 버전 4.0(1999)에서 도입되었지만 HTML5(2014)에서 사용되지 않았다.
프레임break a fundamental principle of the web, 즉 하나의 페이지는 하나의 정보 단원으로 URL을 사용하여 보기와 클릭/내비게이션을 할 수 있다.그러나 프레임에 표시되는 정보는 사용자의 일련의 탐색 작업에 따라 달라집니다.
현대 단일 페이지 프로그램의 동적 내용은 패턴 화면, 사이드바, 무한 스크롤 목록에서도 마찬가지일 수 있지만, 이것은 또 다른 시대의 토론이다.
지금은 2020년이다. 이것은 당신이 CSS를 사용하여 당신의 홈페이지에 정보를 전시해야 한다는 것을 의미한다.현재 모든 주류 브라우저는 flexbox를 지원하고 a bit of CSS and a few semantic HTML5 elements를 사용하여 이런 유형의 레이아웃을 만드는 것은 매우 쉽다.
Mozilla 프레임에 대한 설명:
Deprecated
This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
단지 인터넷상에서 우리가 프레임워크를 사용해서는 안 된다고 말했기 때문에 이렇게 하는 것을 금지하는 것은 아니다. 그렇지?
React가 있는 프레임 사용
나는 react-frame-component 라이브러리에서 <iframe>에서React 프로그램을 보여줄 수 있다는 깨우침을 받았다. 나는 내가 <frame>를 위해 같은 일을 할 수 있을지 궁금하다.
이 라이브러리에서 모든 React 구성 요소를 <Frame> 구성 요소에 전달할 수 있는 react 프레임워크 구성 요소 라이브러리를 만들고 싶습니다. 이 구성 요소는 문서에 표시됩니다.이러한 구성 요소는 원래 프레임 및 프레임세트 요소와 유사한 추상화입니다.
<Frameset rows="20%, 80%">
<Frame name="nav">
<Menu />
</Frame>
<Frame name="main">
<Home />
</Frame>
</Frameset>
페이지에 대한 프레임src 속성이 아닌 표시할 서브어셈블리를 전달합니다.프레임 테두리와 (dis) 크기 조절을 허용하는 옵션을 사용하지 않는 것도 받아들여야 한다.name 속성은 네비게이션을 위해 프레임을 지정하는 데 사용됩니다(아래 참조).
원래 프레임 속성
프레임 세트
<frameset>가 <body> 표시를 바꿨는데 이것은 React에서 문제입니다. React 응용 프로그램을 보여주려면 DOM 요소 용기가 응용 프로그램을 보여야 하기 때문입니다.마지막으로, 나는 <html> 을 React 응용 프로그램의 루트로 만들기로 결정했다. 이것은 이 응용 프로그램이 더 이상 존재하지 않는다는 것을 의미한다. (스타일, 제목이 없다.)
나는 React를 사용하여 <head>와 cols를 도구로 rows 요소에 전달할 수 없기 때문에 리프를 사용하고 JS를 사용하여 속성을 설정해야 한다.왜 그런지 모르겠어요.
class Frameset extends React.Component {
constructor(props) {
super(props);
this.ref = React.createRef();
}
componentDidMount() {
if (this.props.cols) {
this.ref.current.setAttribute("cols", this.props.cols);
}
if (this.props.rows) {
this.ref.current.setAttribute("rows", this.props.rows);
}
}
render() {
return (
<frameset ref={this.ref}>{this.props.children}</frameset>
);
}
}
또한 React는 프레임세트 요소를 중첩할 수 없다는 심각한 경고를 표시합니다. 이는 잘못된 것이라고 생각합니다.
Warning: validateDOMNesting(...): <frameset> cannot appear as a child of <frameset>.
in frameset (at Frameset.js:45)
프레임
실현 틀 자체가 좀 복잡하다.프레임의 문서에 액세스하여 React 구성 요소를 렌더링해야 합니다.
속성을 사용하여 문서에 쉽게 액세스할 수 있습니다.
react 프레임워크 구성 요소 라이브러리는 contentDocument 문서 내용을 덮어쓰는 데 사용됩니다.이것은 가능하지만 현대 브라우저에서는 document.write():
let doc = this.frameRef.current.contentDocument;
doc.open("text/html", "replace");
doc.write(
'<!DOCTYPE html><html><head></head><body style="margin:0"><div id="root"></div></body></html>'
);
doc.close();
나는 간단하게 콘텐츠 문서의 주체에 새로운React 구성 요소 트리를 보여 주려고 했지만, 그 다음에 페이지가 짧게 내용을 표시한 후에 사라졌고, 결과는 빈 페이지였다.React를 사용하면 프레임의 onLoad 이벤트를 기다릴 수 없지만, <frameset> 지연 렌더링을 사용하면 이를 할 수 있을 것 같습니다.
React는 이번에는 프로그램을 문서체에 직접 보여주지 말아야 한다고 다시 한 번 불평했다. 그래서 나는 용기 요소를 수동으로 삽입했다.그런 다음 각 setTimeout() 화면에서 구성 요소를 이 컨테이너에 렌더링할 수 있습니다.
ReactDOM.render(this.props.children, this.rootRef.current);
추천하지 않음
프레임 내용 바꾸기
HTML의 componentDidUpdate()처럼 대상 프레임에 렌더링하는 구성 요소를 얻었습니다.
<Link target="main" component={Home}>Go Home</Link>
구성 요소 트리에서 이를 실현하기 위해, 나는 각각 <a target="content"> 구성 요소에서 React 상하문을 사용했다. 이것은 대상 프레임 구성 요소의 이름과 교체 함수를 통해 각 프레임에서 렌더링된 구성 요소를 추적한다.
스타일링
프레임마다 문서가 있다는 사실은 프레임 안에 나타난 구성 요소에서 스타일을 가져오는 방식을 완전히 깨뜨렸다.공공 자산 목록의 스타일시트를 프레임워크 문서에 추가하는 사용자 정의 <Frameset> 갈고리를 제시했습니다.예쁘지는 않지만, 이 프로젝트에 있어서는 이미 충분하다.
최종 결과
HTML 프레임의 기본 기능이 성공적으로 구현되었습니다.프레임세트를 중첩하고 여러 개의 구분자가 있는 레이아웃을 만들 수 있습니다.이 실현은 약간의 기교가 필요하다. 나는 정말 크로스 구성 요소 공유 상태가 효과가 있는지 의심스럽다.나는 심지어 생산 모델에서 그것을 테스트한 적이 없지만, 어쨌든 그것은 생산에서 사용할 생각은 없다.
전체 애플리케이션은 다음과 같습니다.
Reference
이 문제에 관하여(React에서 HTML 프레임 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/ekeijl/rendering-react-components-inside-a-frame-5gn1
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>A simple frameset document</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAME name="menu" src="menu.html">
<FRAME name="content" src="content.html">
</FRAMESET>
</HTML>
<a href="page2.html" target="content">Go to page 3</a>
나는 몇 년 전에 웹 사이트를 틀로 만들었던 것을 기억한다. 나는 그것들에게 무슨 일이 일어났는지 알고 싶다.요컨대
<frame> 요소는 HTML 버전 4.0(1999)에서 도입되었지만 HTML5(2014)에서 사용되지 않았다.프레임break a fundamental principle of the web, 즉 하나의 페이지는 하나의 정보 단원으로 URL을 사용하여 보기와 클릭/내비게이션을 할 수 있다.그러나 프레임에 표시되는 정보는 사용자의 일련의 탐색 작업에 따라 달라집니다.
현대 단일 페이지 프로그램의 동적 내용은 패턴 화면, 사이드바, 무한 스크롤 목록에서도 마찬가지일 수 있지만, 이것은 또 다른 시대의 토론이다.
지금은 2020년이다. 이것은 당신이 CSS를 사용하여 당신의 홈페이지에 정보를 전시해야 한다는 것을 의미한다.현재 모든 주류 브라우저는 flexbox를 지원하고 a bit of CSS and a few semantic HTML5 elements를 사용하여 이런 유형의 레이아웃을 만드는 것은 매우 쉽다.
Mozilla 프레임에 대한 설명:
Deprecated
This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
단지 인터넷상에서 우리가 프레임워크를 사용해서는 안 된다고 말했기 때문에 이렇게 하는 것을 금지하는 것은 아니다. 그렇지?
React가 있는 프레임 사용
나는 react-frame-component 라이브러리에서 <iframe>에서React 프로그램을 보여줄 수 있다는 깨우침을 받았다. 나는 내가 <frame>를 위해 같은 일을 할 수 있을지 궁금하다.
이 라이브러리에서 모든 React 구성 요소를 <Frame> 구성 요소에 전달할 수 있는 react 프레임워크 구성 요소 라이브러리를 만들고 싶습니다. 이 구성 요소는 문서에 표시됩니다.이러한 구성 요소는 원래 프레임 및 프레임세트 요소와 유사한 추상화입니다.
<Frameset rows="20%, 80%">
<Frame name="nav">
<Menu />
</Frame>
<Frame name="main">
<Home />
</Frame>
</Frameset>
페이지에 대한 프레임src 속성이 아닌 표시할 서브어셈블리를 전달합니다.프레임 테두리와 (dis) 크기 조절을 허용하는 옵션을 사용하지 않는 것도 받아들여야 한다.name 속성은 네비게이션을 위해 프레임을 지정하는 데 사용됩니다(아래 참조).
원래 프레임 속성
프레임 세트
<frameset>가 <body> 표시를 바꿨는데 이것은 React에서 문제입니다. React 응용 프로그램을 보여주려면 DOM 요소 용기가 응용 프로그램을 보여야 하기 때문입니다.마지막으로, 나는 <html> 을 React 응용 프로그램의 루트로 만들기로 결정했다. 이것은 이 응용 프로그램이 더 이상 존재하지 않는다는 것을 의미한다. (스타일, 제목이 없다.)
나는 React를 사용하여 <head>와 cols를 도구로 rows 요소에 전달할 수 없기 때문에 리프를 사용하고 JS를 사용하여 속성을 설정해야 한다.왜 그런지 모르겠어요.
class Frameset extends React.Component {
constructor(props) {
super(props);
this.ref = React.createRef();
}
componentDidMount() {
if (this.props.cols) {
this.ref.current.setAttribute("cols", this.props.cols);
}
if (this.props.rows) {
this.ref.current.setAttribute("rows", this.props.rows);
}
}
render() {
return (
<frameset ref={this.ref}>{this.props.children}</frameset>
);
}
}
또한 React는 프레임세트 요소를 중첩할 수 없다는 심각한 경고를 표시합니다. 이는 잘못된 것이라고 생각합니다.
Warning: validateDOMNesting(...): <frameset> cannot appear as a child of <frameset>.
in frameset (at Frameset.js:45)
프레임
실현 틀 자체가 좀 복잡하다.프레임의 문서에 액세스하여 React 구성 요소를 렌더링해야 합니다.
속성을 사용하여 문서에 쉽게 액세스할 수 있습니다.
react 프레임워크 구성 요소 라이브러리는 contentDocument 문서 내용을 덮어쓰는 데 사용됩니다.이것은 가능하지만 현대 브라우저에서는 document.write():
let doc = this.frameRef.current.contentDocument;
doc.open("text/html", "replace");
doc.write(
'<!DOCTYPE html><html><head></head><body style="margin:0"><div id="root"></div></body></html>'
);
doc.close();
나는 간단하게 콘텐츠 문서의 주체에 새로운React 구성 요소 트리를 보여 주려고 했지만, 그 다음에 페이지가 짧게 내용을 표시한 후에 사라졌고, 결과는 빈 페이지였다.React를 사용하면 프레임의 onLoad 이벤트를 기다릴 수 없지만, <frameset> 지연 렌더링을 사용하면 이를 할 수 있을 것 같습니다.
React는 이번에는 프로그램을 문서체에 직접 보여주지 말아야 한다고 다시 한 번 불평했다. 그래서 나는 용기 요소를 수동으로 삽입했다.그런 다음 각 setTimeout() 화면에서 구성 요소를 이 컨테이너에 렌더링할 수 있습니다.
ReactDOM.render(this.props.children, this.rootRef.current);
추천하지 않음
프레임 내용 바꾸기
HTML의 componentDidUpdate()처럼 대상 프레임에 렌더링하는 구성 요소를 얻었습니다.
<Link target="main" component={Home}>Go Home</Link>
구성 요소 트리에서 이를 실현하기 위해, 나는 각각 <a target="content"> 구성 요소에서 React 상하문을 사용했다. 이것은 대상 프레임 구성 요소의 이름과 교체 함수를 통해 각 프레임에서 렌더링된 구성 요소를 추적한다.
스타일링
프레임마다 문서가 있다는 사실은 프레임 안에 나타난 구성 요소에서 스타일을 가져오는 방식을 완전히 깨뜨렸다.공공 자산 목록의 스타일시트를 프레임워크 문서에 추가하는 사용자 정의 <Frameset> 갈고리를 제시했습니다.예쁘지는 않지만, 이 프로젝트에 있어서는 이미 충분하다.
최종 결과
HTML 프레임의 기본 기능이 성공적으로 구현되었습니다.프레임세트를 중첩하고 여러 개의 구분자가 있는 레이아웃을 만들 수 있습니다.이 실현은 약간의 기교가 필요하다. 나는 정말 크로스 구성 요소 공유 상태가 효과가 있는지 의심스럽다.나는 심지어 생산 모델에서 그것을 테스트한 적이 없지만, 어쨌든 그것은 생산에서 사용할 생각은 없다.
전체 애플리케이션은 다음과 같습니다.
Reference
이 문제에 관하여(React에서 HTML 프레임 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/ekeijl/rendering-react-components-inside-a-frame-5gn1
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<Frameset rows="20%, 80%">
<Frame name="nav">
<Menu />
</Frame>
<Frame name="main">
<Home />
</Frame>
</Frameset>
class Frameset extends React.Component {
constructor(props) {
super(props);
this.ref = React.createRef();
}
componentDidMount() {
if (this.props.cols) {
this.ref.current.setAttribute("cols", this.props.cols);
}
if (this.props.rows) {
this.ref.current.setAttribute("rows", this.props.rows);
}
}
render() {
return (
<frameset ref={this.ref}>{this.props.children}</frameset>
);
}
}
Warning: validateDOMNesting(...): <frameset> cannot appear as a child of <frameset>.
in frameset (at Frameset.js:45)
let doc = this.frameRef.current.contentDocument;
doc.open("text/html", "replace");
doc.write(
'<!DOCTYPE html><html><head></head><body style="margin:0"><div id="root"></div></body></html>'
);
doc.close();
ReactDOM.render(this.props.children, this.rootRef.current);
<Link target="main" component={Home}>Go Home</Link>
Reference
이 문제에 관하여(React에서 HTML 프레임 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ekeijl/rendering-react-components-inside-a-frame-5gn1텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
