从urls列表中设置iframe src

Question

我在动态设置iframe源时遇到了问题。我有一个带有n个iframe和img元素的页面，以及一个urls列表。我尝试使用for循环来设置每个iframe的/img的src属性。

我的html是这样的：

<iframe id="iframe-1" width="400" height="300">iframe one</iframe>
<img width="400" height="300">image one</img>
<iframe id="iframe-2" width="400" height="300">iframe two</iframe>
<img width="400" height="300">image one</img>
<iframe id="iframe-3" width="400" height="300">iframe three</iframe>

这是我尝试过的方法。我也尝试过：

<script type="text/javascript">

var sources =     ["www.google.com","www.yahoo.com","www.weather.com","www.bing.com","www.nytimes.com"];
var elements = document.querySelectorAll("iframe, src");

for (var i = o; i < elements.length; i++)
{
    elements[i].src = sources[i];
}
</script>

源代码没有显示在iframes/ imgs中。有比querySelectorAll更好的DOM选择器吗？或者我应该让元素在循环中查询？我尝试过一些不起作用的变种。

谢谢你的帮助

Answer 1

由于安全原因，您指定的urls无法加载到iframe中，这些站点可防止clickjack攻击。点击攻击可以通过X-Frame-Options响应头，"X-Frame-Options“value=”拒绝“或"X-Frame-Options”value="SAMEORIGIN“来保护。通过此标头设置，所有标准网站都可以防止clickjack攻击。

Answer 2

您的代码中有两个错误：

1)您正在将变量i设置为字符o。该行应为：

for (var i = 0; i < elements.length; i++)

2)您的iframe缺少http，因此正确的方法是将它们添加到数组中：

["http://www.google.com","http://www.yahoo.com","http://www.weather.com","http://www.bing.com","http://www.nytimes.com"]

修复这些错误后，您的脚本可以正常工作。

您必须注意，大多数流行的站点使用脚本或特殊的header字段来防止将它们包含在iframe元素中。这就是为什么这些特定的站点不可能在iframe中显示。

Answer 3

目标？

我对你想要做的事情有点迷惑。看起来您在一个页面上有几个iFrames，并且您有一个URL数组，并且您希望用这些URL更新页面上的iFrames。

显而易见的问题

我在你的第一篇文章中观察到了一些明显的问题。首先，选择器"iframe, src"没有任何意义，因为没有"src"元素。如果您正在尝试选择具有src属性的任何内容，则可以使用如下选择器："[src]"。

其次，您的for循环不正确。您使用的是字母o而不是数字0。您的for循环应该如下所示：for (var i = 0; i < elements.length; i++)

最后，在将URL添加到iFrame时，您应该将其附加到URL。您还可以通过将URL设置为以下格式来使其与协议无关：//www.google.com

建议

这种方法通常有点奇怪，因为每次想要向数组添加新链接时，都必须向页面添加额外的iframe。相反，为什么不简单地为每个URL插入一个新的iFrame？

编辑

正如另一位用户提到的，许多网站会阻止你将它们嵌入到iFrames中。例如，如果你注意到Google.com上的x-frame-options:SAMEORIGIN头，这是在告诉你的浏览器不应该在一个框架中显示网站，除非该框架是从相同的域提供的。