[JS] jquery로 iframe 내부 tag접근

우선 iframe 선언은 아래와 같이 되어있습니다. dataUrl은 iframe에 보여줄 url을 지정하면 됩니다.

v-bind:src 문법은 vue 에서 사용하기에 일반적인 js에서는 src="" 로 사용하시면 됩니다

<iframe id="iframeView" v-bind:src="dataUrl" @load="test"></iframe>

iframe에 접근할땐

$('#iframeView')

위와 같이 접근하면 iframeView를 id로 갖고있는 tag들이 배열로 return 되게됩니다.

그러므로 하나만 있다면 아래와 같은 형태로 접근하면 됩니다.

$('#iframeView')[0]

 

이제 iframe을 가져왔으니 iframe 내부에 있는 tag들에 접근하겟습니다

$('#iframeView')[0].contentDocument.getElementById('elementId')
$('#iframeview').contents().find('#elementId')[0]

위와 같은 형태로 접근하면 elementId 를 id로 갖는 tag가 반환됩니다.

첫줄을 예로 들면

$('#iframeView')[0].contentDocument.getElementById('elementId').value = 'tempValue'

이런식으로 tag값을 수정할 수 있습니다.