javascript에서 html page의 parameter값을 지정하여 신규 페이지 오픈 ( post / get )

DevOps/Web 2022. 7. 28. 17:25

설명

javascript로 새로운 html page를 get 혹은 post 방식으로 오픈

 

방법

post

// html
<form id="post_form" name="post_form">
    <input type="text" id='param1' name='param1' value="bb">
    <input type="text" id='param2' name='param2' value="aa">
    <input type="text" id='param3' name='param3' value="oo">
</form>


// javascript
var post_form = document.post_form;
var url = '/project/post_test'
window.open('','project_post')

post_form.action = url;
post_form.method="post";
post_form.target = 'project_post' 
post_form.param1 = 'banana'
post_form.param2 = 'apple'
post_form.param3 = 'orange'

post_form.submit(); 

get

// html


// javascript
var param1_val = 'banana' 
var param2_val = 'apple' 
var param3_val = 'orange' 
window.open('/project/get_test?param1='+param1_val+'&param2='+param2_val+'&param3='+param3_val);

참고

https://milkye.tistory.com/354

저작자표시 비영리 변경금지 (새창열림)

'DevOps > Web' 카테고리의 다른 글

javascript로 html page parameter 추출  (0) 2022.07.28
html div page code copy ( html 페이지 코드 복사 )  (0) 2022.07.27
html rendered html page copy ( 소스가 변환되어 생성된 html 페이지 복사 )  (0) 2022.07.27
html page snapshot -> html2canvas ( html 화면 이미지로 변환 )  (0) 2022.07.27
html <div>, <span> tag 개념과 차이점  (0) 2022.07.27
  • By SJinDBA

javascript로 html page parameter 추출

DevOps/Web 2022. 7. 28. 15:25

내용

html page의 url 정보에서 parameter값을 추출

 

방법

getParam 함수를 등록하여, 파라미터명으로 값을 조회

// param값을 조회하는 함수 등록
function getParam(sname) {
    var params = location.search.substr(location.search.indexOf("?") + 1);
    var sval = "";
    params = params.split("&");
    for (var i = 0; i < params.length; i++) {
        temp = params[i].split("=");
        if ([temp[0]] == sname) { sval = temp[1]; }
    }
    return sval;
}

// 테스트 URL : http://www.test.com/test.html?param1=apple&param2=banana&param3=orange

// 호출
console.log(getParam("param2"));
console.log(getParam("param1"));
console.log(getParam("param3"));

// 결과"banana"
"apple"
"orange"

참고

https://electronic-moongchi.tistory.com/82

저작자표시 비영리 변경금지 (새창열림)

'DevOps > Web' 카테고리의 다른 글

javascript에서 html page의 parameter값을 지정하여 신규 페이지 오픈 ( post / get )  (0) 2022.07.28
html div page code copy ( html 페이지 코드 복사 )  (0) 2022.07.27
html rendered html page copy ( 소스가 변환되어 생성된 html 페이지 복사 )  (0) 2022.07.27
html page snapshot -> html2canvas ( html 화면 이미지로 변환 )  (0) 2022.07.27
html <div>, <span> tag 개념과 차이점  (0) 2022.07.27
  • By SJinDBA

html div page code copy ( html 페이지 코드 복사 )

DevOps/Web 2022. 7. 27. 18:00

 

내용

html div 내부에 정의된 page를 code형태로 추출하여 클립보드로 복사하는 기능

 

방법

html

<div id="test_div" name="test_div">
      ~~~~~~~~
</div>

 

javascript

function page_code_copy(){

    file = window.location.href;

    var copyText = document.getElementById("test_div");

    var textArea = document.createElement("textarea");

    textArea.style.position = 'fixed';
    textArea.style.top = 0;
    textArea.style.left = 0;

    // Ensure it has a small width and height. Setting to 1px / 1em
    // doesn't work as this gives a negative w/h on some browsers.
    textArea.style.width = '2em';
    textArea.style.height = '2em';

    // We don't need padding, reducing the size if it does flash render.
    textArea.style.padding = 0;

    // Clean up any borders.
    textArea.style.border = 'none';
    textArea.style.outline = 'none';
    textArea.style.boxShadow = 'none';

    // Avoid flash of white box if rendered for any reason.
    textArea.style.background = 'transparent';

    textArea.value = copyText.innerHTML;
    document.body.appendChild(textArea);

    textArea.select();

    try {
        var successful = document.execCommand('copy');
        var msg = successful ? 'successful' : 'unsuccessful';
        console.log('Copying text command was ' + msg);
        showAlert('Page Code Copy', 'Page Code Copy Successful !!', 2, 2000);
    } catch (err) {
        console.log('Oops, unable to copy');
    }

      document.body.removeChild(textArea);

    /* Select the text field */
    //copyText.select();
    //copyText.setSelectionRange(0, 99999); /* For mobile devices */

    /* Copy the text inside the text field */
    //navigator.clipboard.writeText(copyText.innerHTML);
    //showAlert('Report Copy', 'Report Copy Successful !!', 2, 2000);
}

참고

https://gist.github.com/vitsalis/1b44302d92213d0a09128a4284f15ad6

저작자표시 비영리 변경금지 (새창열림)

'DevOps > Web' 카테고리의 다른 글

javascript에서 html page의 parameter값을 지정하여 신규 페이지 오픈 ( post / get )  (0) 2022.07.28
javascript로 html page parameter 추출  (0) 2022.07.28
html rendered html page copy ( 소스가 변환되어 생성된 html 페이지 복사 )  (0) 2022.07.27
html page snapshot -> html2canvas ( html 화면 이미지로 변환 )  (0) 2022.07.27
html <div>, <span> tag 개념과 차이점  (0) 2022.07.27
  • By SJinDBA

to Top

티스토리툴바