programing

jQuery가 있는 HTML 게시물로 iframe 대상 지정

topblog 2023. 9. 15. 20:40
반응형

jQuery가 있는 HTML 게시물로 iframe 대상 지정

jQuery 또는 JavaScript를 사용하여 게시물을 작성하는 경우 현재 페이지가 아닌 iframe을 대상으로 할 수 있는 방법은 무엇입니까?

jQuery.post( 
    url, 
    [data], 
    [callback], 
    [type] 
) 

그것이 jQuery 게시물의 형식입니다. 에 있는 것처럼 대상을 명시할 곳은 없는 것 같습니다.<form>꼬리표를 매다

무슨 생각 있어요?

이 작업은 일반 양식을 통해 수행할 수 있습니다.

<form action="targetpage.php" method="post" target="iframename" id="formid">
   <input type="hidden" name="foo" value="bar" />
</form>

그런 다음 jQuery를 사용하여 양식을 제출할 수 있습니다.

$("#formid").submit();

AJAX 요청의 포인트를 놓치고 있는 것 같습니다. 비동기 요청의 "대상"을 지정하려는 이유는 무엇입니까?AJAX의 핵심은 서버의 요청이 페이지 재로드나 HTML 대상이 아닌 자바스크립트로 다시 전송된다는 점입니다.

요청 결과를 iframe에 로드하려면 다음 작업을 수행할 수 있습니다.

$.post('myurl', function(data) {
    $('#myframe').html(data);
}, 'html');

폼을 동적으로 생성하여 바디에 추가하면 폼 내에서 허용되지 않는 문제를 해결할 수 있습니다.그럼 당신은 이런 일을 하겠죠.

$().ready(function() {
    $('body').append('<form 
       action="url" 
       method="post" 
       target="iframename" 
       id="myspecialform">
         <input type="hidden" name="parameter" value="value" />
       </form>');
});

그러면 페이지의 다른 모든 내용을 포함하는 기본 양식 외부에 iframe 업데이트 양식이 작성됩니다.추천한 :럼가한로요요로한n가럼tlsht:d$('#myspecialform').submit();.

일반 html로 javascript로 한 방법은 다음과 같습니다.

var form=$("<form/>").attr({
    method: "post",
    action: "iframe.php",
    target: "list_frame"
});
form.append($("<input/>").attr({name:"field1",value:0}));
form.append($("<input/>").attr({name:"field2",value:1}));
form.append($("<input/>").attr({name:"field3",value:2}));
form.append($("<input/>").attr({name:"field4",value:3}));
form.append($("<input/>").attr({name:"field5",value:4}));
$("body").append(form);
form.submit();

이 질문이 오래된 것은 알지만, ASP에서 한 방법은 이렇습니다.jQuery를 사용하는 Net(C#).

//Create the form in a jQuery object
$("<form action='/FormPostTo.aspx' method='post' target='nameofframe'></form>")
    //Get the value from the asp textbox with the ID txtBox1 and POST it as b1
    .append($("<input type='hidden' name='b1' />").attr('value',$('#<%= txtBox1.ClientID %>').val()))
    //Get the value from the asp textbox with the ID txtBox2 and POST it as b2
    .append($("<input type='hidden' name='b2' />").attr('value',$('#<%= txtBox2.ClientID %>').val()))
    //Add the form to the body tag
    .appendTo('body')
    //Submit the form which posts the variables into the iframe
    .submit()
    //Remove the form from the DOM (so subsequent requests won't keep expanding the DOM)
    .remove();

간단한 메모만 해주세요.의를해력를는이라게을에가다게라이ieeetsdrnetam(dncx,ng의fte는ee에가'그 안에.연결하면 HTML이 엉망이 되어 구문 분석이 제대로 되지 않습니다.

또한, 이것은 사용된 후 DOM에서 폼을 제거하기 때문에 iFrame에 여러 번 포스팅할 경우 폼 요소로 DOM을 채우지 않습니다.

폼 요소가 없는 경우 폼 요소를 생성한 다음 이미 있는 경우 ID로 참조하여 재사용하는 것이 약간의 변경 사항입니다.

이상적으로 AJAX/jQuery를 사용하는 양식을 통해 원격 페이지에 데이터를 제출해야 할 때 asp.net 페이지의 양식 내에 양식이 있는 문제를 해결하기 위해 수행한 작업입니다.

  1. asp.net 양식 이름, 대상, 동작, 방법 등을 캡처하기 위해 변수를 만들었습니다.

  2. 저는 그 변수들에 있는 양식의 정보를 보유한 다음 jQuery를 사용하여 양식 자체를 변경하여 필요한 작업을 수행했습니다.

  3. 그런 다음 양식을 AJAX를 통해 게시했습니다(다른 페이지가 정보를 얻을 수 있도록 동적으로 별도의 페이지에 게시할 양식이 필요했기 때문입니다).

  4. 마지막으로, 저는 asp.net 양식을 원래 방식으로 변경하여 페이지의 나머지 부분이 올바르게 작동할 수 있도록 했습니다.

이를 통해 유사한 솔루션에 대한 제 요구가 해결된 것 같습니다.

당신은 AJAX의 요점을 놓치고 있습니다.만약 iframe에 무언가를 게시하고 싶다면, 자바스크립트나 일반적인 방식으로 게시되는 간단한 양식, 즉 제출 버튼을 통해 이것을 할 수 있습니다.

언급URL : https://stackoverflow.com/questions/1003973/target-an-iframe-with-a-html-post-with-jquery

반응형