how to get the src from a user inputted iframe url

Question

I have an input function that accepts an iframe embed URL from the user is there any way to get the src from the input. For example: if user inputted <iframe width="1263" height="480" src="https://www.youtube.com/embed/KWFKabzKSxw" title="YouTube video player" frameborder="0" allowfullscreen></iframe> i want to extract the src that would be https://www.youtube.com/embed/KWFKabzKSxw and assign it to a new var. My current code is attached below. Any help is appreciated. Thanks in advance.

function input() {
  globalThis.urlInput = "";
  urlInput = prompt("Enter embed URL:");
  if (urlInput == "") {
    alert("No URL Inputted");
  } else {
    rename();
  }
}

/*something like this but this wont work because urlInput is not an Id*/
function rename() {
  var newUrl = document.getElementById(urlInput).src;
}

<button onclick="input()">Input1</button>

AndrewL64 · Accepted Answer · 2021-03-31 18:47:06Z

1

Just convert the input text to html using the DOMParser() API, retrieve the src from it and then assign the url to a variable say, x like this:

function input() {
  globalThis.urlInput = "";
  urlInput = prompt("Enter embed URL:");
  if (urlInput == "") {
    alert("No URL Inputted");
  } else {
    rename();
  }
}

function rename() {
  const parser = new DOMParser();
  const x = parser.parseFromString(urlInput, "text/html").body.firstChild.src; //convert the retrieved input text to HTML and retrieve the src attribute value from it
  alert(x);
}

<button onclick="input()">Input1</button>

edited Mar 31, 2021 at 18:47

answered Mar 31, 2021 at 18:11

AndrewL64

16.4k8 gold badges51 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

anon10023108 Over a year ago

this won't work I am trying to get the src straight from the user input @AndrewL64

AndrewL64 Over a year ago

@anon10023108 Oh, you mean retrieve the src from the prompt? Hold on.

Bernhard Beatus · Accepted Answer · 2021-03-31 18:36:57Z

1

function input() {
  globalThis.urlInput = "";
  urlInput = prompt("Enter embed URL:");
  $('#input').html(urlInput);
  $('#input').hide();
  console.log($('#input iframe').attr('src'));
  if (urlInput == "") {
    alert("No URL Inputted");
  } else {
    rename();
  }
}

/*something like this but this wont work because urlInput is not an Id*/
function rename() {
  //var newUrl = document.getElementById(urlInput).src;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="input()">Input1</button>
<div id=input type="hidden"></div>

answered Mar 31, 2021 at 18:36

Bernhard Beatus

1,2161 gold badge8 silver badges8 bronze badges

Comments

Dhara · Accepted Answer · 2021-03-31 18:41:32Z

I have created a hidden DOM and added into body and get the URL and delete the DOM after saving the src from Iframe from prompt.

function input() {
  globalThis.urlInput = "";
  urlInput = prompt("Enter embed URL:");
  if (urlInput == "") {
    alert("No URL Inputted");
  } else {
    rename();
  }
}

/*something like this but this wont work because urlInput is not an Id*/
function rename() {
var input = document.createElement('div');
input.style.display = 'hidden';
input.id = 'tempInput'

document.body.appendChild(input); 
input.innerHTML = urlInput;

var URL = document.querySelector('#tempInput iframe').src;
  console.log(document.querySelector('#tempInput iframe').src);
  
  document.getElementById("tempInput").remove();
}

<button onclick="input()">Input1</button>

Collectives™ on Stack Overflow

how to get the src from a user inputted iframe url

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related