使用 javascript 重命名 iframe

Question

我正在尝试弄清楚如何 name/rename iframe 与 javascript。

function sesamOpenU(){
  x = document.querySelector('iframe');
  x.style.height=  '200px';
  x.style.width= '400px';
  x.name = 'myFrame1' ;
  let url = 'https://www.example.com/'
  let other = window.open(url,'myFrame');
}

    
<iframe name ="myFrame">
</iframe>
<button onclick= "sesamOpenU()">Sesam, open U</button>

首先，我尝试在定义 x 后用 x.name 命名一个没有名称的 iframe。控制台没有错误，但也没有结果。

我手动命名了 iframe 以定位它，它起作用了。然后我尝试用 Javascript 重命名它，但还是没有结果。为了排除问题，我决定调整高度和宽度作为参考，看看是否会调整。确实如此。

功能前的调整都试过了，没有效果。（宽度和高度有，名称没有）

有人可以解决我的问题吗？

编辑：是的，我知道我的目标是 myFrame，而不是示例中的 myFrame1。这是测试它会采取哪一个的最后一步。命名版本或重命名版本。命名版本有效，重命名版本无效（在新选项卡中打开网页）编辑：已解决。

Answer 1

该代码确实重新分配了 iframe 的名称，但您设置源的方式似乎不起作用。

我尝试了以下似乎有效的方法：

function sesamOpenU(){
  x = document.querySelector('iframe');
  x.style.height=  '200px';
  x.style.width= '400px';
  x.name = 'myFrame1' ;
  let url = 'https://www.example.com/';
  x.src = url;
}

<iframe name ="myFrame">
</iframe>
<button onclick= "sesamOpenU()">Sesam, open U</button>

Answer 2

注意：您的代码在 SO 片段中不起作用，至少在我的系统上，它给出了这个错误：

js:26 Blocked opening 'https://www.alternate.nl/' in a new window because the request was made in a sandboxed frame whose 'allow-popups' permission is not set.

所以我把它作为一个完整的代码试过了，见下文。

重命名 iframe 效果很好 - 只要你返回一个 url 允许它自己在 iframe 中 - 不知何故你原来的 url 已经被一个替换了那行不通 - 以及 iframe 是否有另一个名称开头。也许我们错过了原始代码中的一些拼写错误？无论如何，一切都很好:

完整代码如下：

<!doctype html>
<html>
<head>
<title>Test iframe</title>
</head>
<body>
<iframe name='myFrame'></iframe>
    <button onclick= "sesamOpenU()">Sesam, open U</button>
    <script>
    function sesamOpenU(){
      x = document.querySelector('iframe');
      x.style.height=  '200px';
      x.style.width= '400px';
      x.name = 'myFrame1' ;
      let url = 'https://www.alternate.nl/'
      let other = window.open(url,'myFrame1');
    }
</script>
</body>
</html>

Answer 3

本地测试显示 Firefox 和 Chrome 之间存在差异 - Firefox 愉快地在 iframe 中打开提供给 window.open 的 url，其名称与作为第二个参数提供的浏览上下文同名. Chrome 没有并且会在新标签页中打开 url。

可能的解决方法是直接设置 iframe 元素的 src 属性：

function sesamOpenU(){
  x = document.querySelector('iframe');
  x.style.height=  '200px';
  x.style.width= '400px';
  x.name = 'myFrame1' ;
  let url = 'https://www.example.com/'
  // let other = window.open(url,'myFrame1');
  x.src = url;
}

这似乎在 Firefox 和 Chrome 中都有效，无论是使用 example.com 还是原始帖子中提供的商业网站 url。

使用 javascript 重命名 iframe

Renaming Iframes with javascript

javascript

iframe

rename