我想用 HTML Get 更改 iframe 源答案

【问题标题】：I would like to change iframe sorce with HTML Get我想用 HTML Get 更改 iframe 源
【发布时间】：2020-05-05 10:07:54
【问题描述】：

我想使用 URL 更改 iframe src URL。例如，如果我将这个 URL http://simplesite.com/videoiframe.html?txtUrl=https://www.simplesite.com&press=Go 输入到浏览器并提交，它应该将 iframe 的 src 部分更改为 https://www.simplesite.com 并按下按钮“Go”。

这是我的代码：

<!DOCTYPE html>
<html>
<script type="text/javascript">
    function setBrowserFrameSource(){
        var browserFrame = document.getElementById("browser");
        browserFrame.src= document.getElementById("txtUrl").value;
    }
</script>
</head>
<div visibility="hidden">

<form method="post" target="browser">
<input id="txtUrl" style="width:82%;" placeholder="Put the website here" name="url" type="text" />
<input style="width:8%;" type="button" value="Go" onclick="setBrowserFrameSource(); return false;"/>
</form>
</div>
<iframe id="browser" name="browser" src="http://google.com" style="height:100%; width:100%"></iframe>
</html>

【问题讨论】：

这能回答你的问题吗？ selection menu for iframe src using javascript
注意：<input> 标签不使用也不需要结束斜线，并且在 HTML 中从来没有。

标签： javascript html url curl get

【解决方案1】：

你可以用window.location.href恢复地址裸url，然后通过URL对象解析它并提取GET searchParams。

要重用代码，您应该允许您的函数接受参数。

然后等到 DOM 加载完毕，允许它读写 DOM 元素标签。

这个 sn-p 应该可以解决问题。

function setBrowserFrameSource( getParameter = null ) {
  var browserFrame = document.getElementById("browser");
  var urlName = document.getElementById("urlName");
  if ( getParameter === null ) {
    browserFrame.src = document.getElementById("txtUrl").value;
  } else {
    browserFrame.src = getParameter;
  }
}

window.addEventListener('load', function() {
  var url = new URL(window.location.href);
  var getParam = url.searchParams.get("txtUrl");
  if ( getParam !== null ) {
    setBrowserFrameSource( getParam );
  }
})

【讨论】：