Этот вопрос закрыт для ответов, так как повторяет вопрос Как получить данные элемента в iframe?
@PHPjedi

Ошибка DOM. Как получить элемент из iframe?

Здравствуйте! У меня на страничке есть embed Vimeo видео. Хочу реализовать кое-что, и мне теперь нужно получить доступ к тегу video, который находиться в элементе iframe.

Мои попытки закончились ошибкой: Blocked a frame with origin "localhost:3000" from accessing a cross-origin frame.

const iframe = document.getElementsByTagName("iframe")


Результат:

src: "https://player.vimeo.com/video/322812559?app_id=122963"
srcdoc: ""
name: ""
sandbox: DOMTokenList [value: ""]
allowFullscreen: true
width: "640"
height: "360"
contentDocument: null
contentWindow: global {window: global, self: global, location: Location, closed: false, frames: global, …}
referrerPolicy: ""
csp: ""
allow: "autoplay; fullscreen"
align: ""
scrolling: ""
frameBorder: "0"
longDesc: ""
marginHeight: ""
marginWidth: ""
featurePolicy: FeaturePolicy {}
loading: "auto"
allowPaymentRequest: false
title: "BMW - THE 7"
lang: ""
translate: true
dir: ""
hidden: false
accessKey: ""
draggable: false
spellcheck: true
autocapitalize: ""
contentEditable: "inherit"
isContentEditable: false
inputMode: ""
offsetParent: div.vimeo
offsetTop: 0
offsetLeft: 0
offsetWidth: 728
offsetHeight: 410
style: CSSStyleDeclaration {alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}
innerText: ""
outerText: ""
oncopy: null
oncut: null
onpaste: null
onabort: null
onblur: null
oncancel: null
oncanplay: null
oncanplaythrough: null
onchange: null
onclick: null
onclose: null
oncontextmenu: null
oncuechange: null
ondblclick: null
ondrag: null
ondragend: null
ondragenter: null
ondragleave: null
ondragover: null
ondragstart: null
ondrop: null
ondurationchange: null
onemptied: null
onended: null
onerror: null
onfocus: null
oninput: null
oninvalid: null
onkeydown: null
onkeypress: null
onkeyup: null
onload: null
onloadeddata: null
onloadedmetadata: null
onloadstart: null
onmousedown: null
onmouseenter: null
onmouseleave: null
onmousemove: null
onmouseout: null
onmouseover: null
onmouseup: null
onmousewheel: null
onpause: null
onplay: null
onplaying: null
onprogress: null
onratechange: null
onreset: null
onresize: null
onscroll: null
onseeked: null
onseeking: null
onselect: null
onstalled: null
onsubmit: null
onsuspend: null
ontimeupdate: null
ontoggle: null
onvolumechange: null
onwaiting: null
onwheel: null
onauxclick: null
ongotpointercapture: null
onlostpointercapture: null
onpointerdown: null
onpointermove: null
onpointerup: null
onpointercancel: null
onpointerover: null
onpointerout: null
onpointerenter: null
onpointerleave: null
onselectstart: null
onselectionchange: null
onanimationend: null
onanimationiteration: null
onanimationstart: null
ontransitionend: null
dataset: DOMStringMap {ready: "true"}
nonce: ""
autofocus: false
tabIndex: 0
enterKeyHint: ""
onformdata: null
onpointerrawupdate: null
namespaceURI: "http://www.w3.org/1999/xhtml"
prefix: null
localName: "iframe"
tagName: "IFRAME"
id: ""
className: ""
classList: DOMTokenList [value: ""]
slot: ""
part: DOMTokenList [value: ""]
attributes: NamedNodeMap {0: src, 1: width, 2: height, 3: frameborder, 4: allow, 5: allowfullscreen, 6: title, 7: data-ready, src: src, width: width, height: height, frameborder: frameborder, allow: allow, …}
shadowRoot: null
assignedSlot: null
innerHTML: ""
outerHTML: "<iframe src="https://player.vimeo.com/video/322812559?app_id=122963" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="" title="BMW - THE 7" data-ready="true"></iframe>"
scrollTop: 0
scrollLeft: 0
scrollWidth: 728
scrollHeight: 410
clientTop: 0
clientLeft: 0
clientWidth: 728
clientHeight: 410
attributeStyleMap: StylePropertyMap {size: 0}
onbeforecopy: null
onbeforecut: null
onbeforepaste: null
onsearch: null
elementTiming: ""
previousElementSibling: null
nextElementSibling: null
children: HTMLCollection []
firstElementChild: null
lastElementChild: null
childElementCount: 0
onfullscreenchange: null
onfullscreenerror: null
onwebkitfullscreenchange: null
onwebkitfullscreenerror: null
nodeType: 1
nodeName: "IFRAME"
baseURI: "http://localhost:3000/courses/html/1"
isConnected: true
ownerDocument: document
parentNode: div.vimeo
parentElement: div.vimeo
childNodes: NodeList []
firstChild: null
lastChild: null
previousSibling: null
nextSibling: null
nodeValue: null
textContent: ""


Подскажите, пожалуйста, как получить тег video? Было бы классно увидеть практический код.

Спасибо!
  • Вопрос задан
  • 469 просмотров
Решения вопроса 2
SeaInside
@SeaInside
15 лет пилю все эти штуки
Здравствуйте!
Вы никак не сможете получить контент айфрейма, если он расположен на другом домене. То, что у вас есть - это максимум.
Айфреймы могут общаться посредством postMessage, но это не ваш случай, Vimeo вам ничего не отправит.
Ответ написан
zkrvndm
@zkrvndm
Архитектор решений
Напрямую получить доступ к содержимому чужого фрейма нельзя, но если вы будете подгружать фрейм со своего родного домена, то тогда без проблем. Как вариант, вы можете написать php-прокси который загружал и отдавал бы фреймы с вашего домена.
Ответ написан
Ваш ответ на вопрос

Вопрос закрыт для ответов и комментариев

Потому что уже есть похожий вопрос.
Похожие вопросы