자바스크립트로 외부 사이트 띄우기

1.  자바스크립트에서 외부 사이트(웹이 아니여도 가능)를 호출해 브라우저로 띄우는 방식

(Post 방식으로 파라미터 바인딩 가능)

- 새로운 브라우저 윈도우 오픈 -> form을 동적으로 생성 후 특정 URL로 전송(POST)방식 이용

const externalSystem = () => {
    // Part1
    const newWindow = window.open("", "newWindow", "width=600,height=400");
    newWindow?.moveTo(0, 0);
    newWindow?.resizeTo(1300, 800);
    
    /*
    •	window.open() creates a new browser window or tab. The first argument ("") means no URL is opened initially; the window is opened as blank.
    •	The second argument ("newWindow") gives the window a name. This is important because the form will be submitted into this window using the same name.
	•	The third argument specifies the window’s initial dimensions (width=600, height=400).
	•	newWindow?.moveTo(0, 0); moves the window to the top-left corner of the screen.
	•	newWindow?.resizeTo(1300, 800); resizes the window to the dimensions 1300x800.
    */

    // 폼을 동적으로 생성
    const form = document.createElement("form");
    // POST 방식으로 호출
    form.method = "POST";
    // 데이터를 보낼 URL
    form.action = "http://test.com/abcdefg.jsp";
    form.target = "newWindow"; // 새 창에 제출 // 폼에 전송할 데이터를 추가

    /*
	• document.createElement("form") creates a new form element.
	• form.method = "POST"; sets the form method to POST, meaning it will send data as a POST request.
	• form.action = "http://test.com/abcdefg.jsp"; defines the URL to which the form data will be sent.
	• form.target = "newWindow"; specifies that the form submission result should be displayed in the new window (identified by the "newWindow" name used earlier).
    */


    const inputData = {
      param1: "param1",
      param2: "param2",
      param3: "param3",
      param4: "param4",
    };

    for (const key in inputData) {
      if (inputData.hasOwnProperty(key)) {
        const input = document.createElement("input");
        input.type = "hidden";
        input.name = key;
        input.value = inputData[key];
        form.appendChild(input);
      }
    }
    
    /*
	• inputData is an object holding the key-value pairs you want to send in the form. Each key represents a parameter name, and the corresponding value is the value to send.
	• A for...in loop iterates over the keys of inputData. For each key, it creates a hidden input element (<input type="hidden">), where:
	• input.name is set to the key (e.g., param1, param2).
	• input.value is set to the corresponding value from the inputData object.
	• form.appendChild(input) attaches each hidden input to the form.
    */
    
    // 폼을 문서에 추가하고 submit
    document.body.appendChild(form);
    form.submit();

    // 폼을 제출한 후, 문서에서 폼을 제거
    document.body.removeChild(form);
    
    /*
	• The form is appended to the document body using document.body.appendChild(form) so that it becomes part of the DOM.
	• form.submit(); sends the form data to the specified URL (http://test.com/abcdefg.jsp) using the POST method.
	• After submission, the form is removed from the DOM with document.body.removeChild(form). This keeps the DOM clean after the operation is completed.
    */
  };

 

2. I frame, Jquery 등으로 내부에 외부 사이트 띄우는 방식