在js中使用”with”语句中跨frame的变量引用问题

在JavaScript中，我们可以使用with语句来简化某些代码块的书写，从而使得代码更加简洁易读。但是，在使用with语句时需要注意，在跨frame的情况下，可能会引起变量引用的问题，尤其是在涉及到变量作用域的问题时。

下面是在JS中使用with语句中跨frame的变量引用问题的完整攻略：

问题的表现

假设在sample.html文件中，我们有一个名为frame1的iframe，同时在frame1中也有另外一个iframe，即frame2。在frame2中有一个全局变量name，现在我们在sample.html中使用如下代码：

with(frame1.frame2) {
  console.log(name);
}

上述代码的目的是希望能够在sample.html中访问frame2的全局name变量。但是，实际上，上述代码执行时可能会报错，提示找不到name变量。

问题的原因

在JavaScript中，每个frame或者window都有自己的作用域，即一个变量的定义范围只在该frame或者window内部有效。在上述代码中，with语句中使用了frame1.frame2，希望可以访问frame2中的变量。但是，由于with语句是在sample.html的作用域中执行的，因此在with语句中使用的变量实际上是sample.html中的变量，而不是frame1.frame2中的变量。因此，当with语句尝试访问name变量时，会找不到该变量而报错。

解决方案

为了解决上述问题，我们需要使用window.frames属性来访问frame2中的全局变量，而不是在with语句中直接引用。下面是修正后的代码：

console.log(window.frames[0].frames[0].name);

在上述代码中，我们使用window.frames属性访问frame1，然后再使用frames属性进一步访问frame2，最后获取该文件中的全局变量name。

除此之外，我们还可以使用window.eval()方法，将需要执行的代码字符串作为参数传入该方法来解决跨frame变量引用问题。下面是一个示例代码：

window.eval("console.log(frame1.frame2.name);");

在上述代码中，我们将console.log()方法包装在一个字符串中，传入window.eval()方法中，这样就可以在frame2中访问name变量了。

总结

以上就是在JS中使用with语句中跨frame的变量引用问题的完整攻略。当我们在使用with语句时，需要注意变量作用域的问题，使用window.frames属性或者window.eval()方法可以帮助我们解决跨frame变量引用的问题。