Javascript 如何编辑从用户输入中获取的url

我有一段代码，要求用户输入一个URL，并使用javascript将其附加到一个div中，效果很好。我试图添加的是编辑用户输入的URL，特别是更改用户输入的iframe的宽度和高度，然后添加它。我的当前代码附在下面。感谢您的帮助。提前谢谢

函数输入（）{
globalThis.urlInput=prompt（“输入嵌入URL:”）；
如果（urlInput==“”）{
警报（“未输入URL”）；
}否则{
appendUrl（）；
}
}
函数appendUrl（）{
document.getElementById（“add_to_me”）.innerHTML+=urlInput；
document.getElementsByTagName（'iframe'）.width=“300px”；
document.getElementsByTagName（'iframe'）.height=“300px”；
}

输入

基本上，我要做的是动态创建iframe，并多次提示url、宽度和高度，然后在新创建的iframe DOM元素上设置它们

据我所知，使用全局变量通常被认为是不好的做法。因此，我编辑了您的代码，将用户函数

input（）

中的用户输入注入到

appendiFrame（输入）

以下是我的扩展代码（请考虑注释）：

函数输入（）{
//创建局部变量
var input={url:''，宽度：'0'，高度：'0'}//创建包含输入的字典
input.url=prompt（“输入嵌入url:”）
if（input.url==“”）{//测试是否给出了url
警报（“未输入URL”）
return//return如果为空
}
input.width=提示（“输入宽度：”）
input.height=提示（“输入高度：”）
附录框架（输入）
}
函数appendiFrame（输入）{
iframe=document.createElement（'iframe'）//动态创建iframe
iframe.src=input.url；
iframe.width=input.width
iframe.height=input.height
document.getElementById（'add_to_me'）.appendChild（iframe）
}

输入

基本上，我要做的是动态创建iframe，并多次提示url、宽度和高度，然后在新创建的iframe DOM元素上设置它们

据我所知，使用全局变量通常被认为是不好的做法。因此，我编辑了您的代码，将用户函数

input（）

中的用户输入注入到

appendiFrame（输入）

以下是我的扩展代码（请考虑注释）：

函数输入（）{
//创建局部变量
var input={url:''，宽度：'0'，高度：'0'}//创建包含输入的字典
input.url=prompt（“输入嵌入url:”）
if（input.url==“”）{//测试是否给出了url
警报（“未输入URL”）
return//return如果为空
}
input.width=提示（“输入宽度：”）
input.height=提示（“输入高度：”）
附录框架（输入）
}
函数appendiFrame（输入）{
iframe=document.createElement（'iframe'）//动态创建iframe
iframe.src=input.url；
iframe.width=input.width
iframe.height=input.height
document.getElementById（'add_to_me'）.appendChild（iframe）
}

输入

我想这就是你想要做的

函数输入（）{
globalThis.urlInput=“”；
urlInput=prompt（“输入嵌入URL:”）；
如果（urlInput==“”）{
警报（“未输入URL”）；
}否则{
appendUrl（）；
}
}
函数appendUrl（）{
var ifrm=document.createElement（“iframe”）；
ifrm.setAttribute（“src”，urlInput）；
ifrm.style.width=“300px”；
ifrm.style.height=“300px”；
ifrm.style.frameborder=“0”；
ifrm.allowFullScreen=true；
文件.body.appendChild（ifrm）；
}

---

输入

我想这就是你想要做的

函数输入（）{
globalThis.urlInput=“”；
urlInput=prompt（“输入嵌入URL:”）；
如果（urlInput==“”）{
警报（“未输入URL”）；
}否则{
appendUrl（）；
}
}
函数appendUrl（）{
var ifrm=document.createElement（“iframe”）；
ifrm.setAttribute（“src”，urlInput）；
ifrm.style.width=“300px”；
ifrm.style.height=“300px”；
ifrm.style.frameborder=“0”；
ifrm.allowFullScreen=true；
文件.body.appendChild（ifrm）；
}

---

Input

您是否考虑过使用一个包含多个输入元素的表单来允许用户传递宽度、高度和URL？不过还是会一样的。假设用户输入了一个iframe嵌入“''然后要求用户输入所需的宽度和高度，您必须编辑用户输入的URL。@EmielZuurbierI理解。所以它不是一个URL，而是一个iframe标记。考虑这一点：如果允许用户单独输入URL、宽度和高度，例如<代码>https://www.youtube.com/embed/XW_KhFq4LQo、

1263

和

480

，然后可以使用这些值构建iframe，而不是修改仅为字符串的现有iframe。那是你喜欢的吗？那真的很聪明。谢谢你的帮助@Emielzuurbier你明白了。你需要帮助解决这个问题吗？你有没有考虑过使用一个包含多个输入元素的表单来允许用户传递宽度、高度和URL？不过还是一样的。假设用户输入了一个iframe嵌入“''然后要求用户输入所需的宽度和高度，您必须编辑用户输入的URL。@EmielZuurbierI理解。所以它不是一个URL，而是一个iframe标记。考虑这一点：如果允许用户单独输入URL、宽度和高度，例如<代码>https://www.youtube.com/embed/XW_KhFq4LQo、

1263

和

480

，然后可以使用这些值构建iframe，而不是修改仅为字符串的现有iframe。那是你想要的东西吗