使用javascript for循环在一个网页中创建100个小型iframe

时间:2018-09-22 13:00:41

标签: javascript jquery html css angularjs

我想在我的网站上创建一个网页,使用javascript for loop可以将100个博客放在iframe中。 当我打开页面时,应该打开许多小的网址iframe,并打开http://www.rathorehomi.com/blog/1之类的网址 http://www.rathorehomi.com/blog/2 http://www.rathorehomi.com/blog/3 ............  http://www.rathorehomi.com/blog/100 它很容易在新窗口中打开,但我需要一页。 谢谢。

 <!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
    <script>
    var i;
    var launch_code;

    for ( var i = 000001; i < 000020; i++) {
        launch_code = "https://www.rathorehomi.com/blog/"+ i;

    window.open(launch_code, '_blank', "width=200, height=100");
        };

    </script>
</body>
</html>

1 个答案:

答案 0 :(得分:2)

就用户体验而言,这不是一个好主意。

不过,您可以通过将每个iframe的HTML添加到累积字符串中,然后将该字符串设置为页面的innerHTML来实现。

您还应该添加一个div来包含iframe(在下面的示例中,我使用的是<div id="page"></div>),否则,您可以通过将脚本放置在body标记中来布置代码,最终可能会覆盖您自己的代码。

var pageContent = "";
for ( var i = 1; i < 20; i++) {
	var urlNumber = ("00000" + i).slice(-6); // pads with leading zeros
	pageContent += '<iframe src="http://www.rathorehomi.com/blog/' + urlNumber + '"></iframe>';
}
document.getElementById( 'page' ).innerHTML = pageContent;
#page {
	text-align: center;
	width: 100%;
}
iframe {
	display: inline-block;
	width: 500px;
	height: 500px;
	margin: 5px;
}
<div id="page">
</div>