2010-03-22 7 views
9

다음과 같은 경우가 있습니다.JavaScript : embed-tag의 src 속성 변경

사용자에게 서버의 일부 오디오 파일을 보여줍니다. 사용자가 폴더를 클릭하면 onFileSelected는 결국 선택한 폴더와 파일로 실행됩니다. 함수가하는 일은 내장 된 객체에서 소스를 변경하는 것입니다. 따라서 어떤 방식으로 파일을 수락하고 사용자의 선택을 저장하기 전에 선택한 파일을 미리 보는 것입니다. A visual aid.

HTML

<embed src="/resources/audio/_webbook_0001/embed_test.mp3" type="audio/mpeg" id="audio_file"> 

자바 스크립트

function onFileSelected(file, directory) { 
    jQuery('embed#audio_file').attr('src', '/resources/audio/'+directory+'/'+file); 
}; 

자,이 파이어 폭스에서 잘 작동하지만 사파리와 크롬은 단순히 관계없이 운영 체제의 소스를 변경하기를 거부.

jQuery는 객체 (jQuery.size()가 1을 반환 함)를 발견하면 코드를 실행하지만 HTML 코드는 변경하지 않습니다.

Safari가 <embed> 소스를 변경하지 못하게하는 이유는 무엇입니까? 이것을 피할 수있는 방법은 무엇입니까?

답변

20

요소 embed 요소를 제거하고 새 src 매개 변수 세트를 사용하여이를 다시 입력해야합니다.

embedobject과 유사하며 특수한 용도 (비디오, 오디오, 플래시, 액티브 X 등)로 인해 일부 브라우저에서는 일반 DOM 요소와 다르게 처리되는 두 요소입니다. 따라서 src 속성을 변경하면 예상 한 동작이 트리거되지 않을 수 있습니다.

가장 좋은 것은 기존의 embed 개체를 제거하고 다시 삽입하는 것입니다. 당신은 매개 변수로 src 속성을 가진 래퍼 함수의 어떤 종류를 작성하는 경우이 쉽게

+0

가 나는 것을 시도를하지만, 어떻게 든 작동하지 않았다. 새로운 삽입 태그를 추가했지만 이전 태그는 제거하지 않았습니다. 이 변형을 iframe과 함께 사용하려고 생각하지만 매우 세련된 해결책은 아닙니다. – Mike

+0

나는 비슷한 문제가 있었고 이것은 나를 위해 일했습니다. 감사! – petejamd

+0

내 문제는 프로그래밍 방식으로 src를 변경하고 play()를 호출하면 여전히 원래의 src가 재생 된 것입니다. 이 조언에 따라 이제 embed 요소를 제거하고 다시 추가하면 사운드가 올바르게 재생됩니다. 고마워요 – Scottm

1

JQuery와는 CSS - 억양 선언은 다음과 같아야합니다 대신 할

대신

function onFileSelected(file, directory) { 
    jQuery('embed#audio_file').attr('src', '/resources/audio/'+directory+'/'+file); 
}; 

일을

function onFileSelected(file, directory) { 
    jQuery('#audio_file').attr('src', '/resources/audio/'+directory+'/'+file); 
}; 

그런 식으로 jQuery는 id = "audio_file"의 객체 만 검색합니다. 내가 "삽입"요소의 "SRC"-attribute을 변경하고자 할 때

+0

당신의 선택기가 "덜 구체적"이며 더 높은 성능의 히트가있을 수 있습니다, 정말 귀하의 견적 "CSS - esque 선언"에 대한 연결을 볼 수 없습니다 ... 게다가, OP를 읽는다면, 그것은 작동합니다 일부 브라우저지만 전부는 아니기 때문에 구문 오류가 아닐 수도 있습니다. – Leon

+0

@Leon, jQuery는 개발자가 염려 할 필요가 없도록 각기 다른 자바 스크립트 구현을 라이브러리에 묶습니다. 충돌하는 일부 브라우저와 관련된 태그의 내부 사용이라고 생각하므로 구문 오류 일 수 있습니다. –

4

나는 또한 같은 문제에 직면했다, 내가 한 그래서 뭐, 아래에 주어진다 :

var parent = $('embed#audio_file').parent(); 
var newElement = "<embed src='new src' id='audio_file'>"; 

$('embed#audio_file').remove(); 
parent.append(newElement); 

그리고 이것은 내 응용 프로그램에서 잘 작동합니다 .

결론 : 먼저 embed 요소를 제거한 다음 src에 변경 사항을 삽입해야합니다. 크롬에 버그가