如何将iFrame的URL的一部分更改为随机字符串?

时间:2015-12-06 17:27:48

标签: javascript jquery html iframe

考虑这个简单的iFrame:

<iframe src="http://example.com/iframe/?user=123&name=test"
  width="200" height="200"></iframe>

我想要的是随机更改部分test

例如更改此

src="http://example.com/iframe/?user=123&name=test"

这样的事情:

src="http://example.com/iframe/?user=123&name=yxcvb"

字符串应包含字母表的随机字母,长度最多为10个字符,例如:

src="http://example.com/iframe/?user=123&name=qwertzuiop"

1 个答案:

答案 0 :(得分:1)

我相信这对你有用: Random alpha-numeric string in JavaScript?

只需生成一个随机字符串(1到10个字符),然后将其分配给iframe的name属性。

我为你准备了一个小提琴:http://jsfiddle.net/4agLwfe8/

<iframe id="iframe" src="http://www.facebook.com?user=123&name=test" width="200" height="200">

此解决方案假设您没有使用JQuery,因为您说您无论如何都不知道如何执行此操作,因此它只是一个简单的JavaScript解决方案。

首先,你有一个简单的iframe。我只是用facebook作为一个简单的例子。我还为它添加了一个ID。

然后我使用了以下JavaScript

function randomNumber(){
    return Math.floor(Math.random() * 10) + 1;  
}

function randomString(length, chars) {
    var result = '';
    for (var i = length; i > 0; --i) result += chars[Math.round(Math.random() * (chars.length - 1))];
    return result;
}

var chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
var iframe = document.getElementById("iframe");
var iframeSrc = iframe.src;
var newIframeSrc = iframe.src.substring(0,iframe.src.indexOf("name")) + "name=" + randomString(randomNumber(), chars);
iframe.src = newIframeSrc;

首先有2个功能。第一个生成1到10之间的随机数,这将是查询字符串中“name”参数的字符长度。第二个函数生成这个随机字符串,传入随机数而不是生成的字符串,以及您指定可以使用的字符串(来自我链接到的初始解决方案)。

从那里,我只是通过我给它的ID选择iframe并抓住它的来源。使用源代码,我只是简单地删除“name”参数和它的子字符串值,然后附加新的“name”参数并重新打开它的新值。最后,我将iframe的新来源分配给iframe。事后我意识到我可以避免砍掉“name =”只是为了重新加上它,但我开始在早上6:30看到这个,然后我的大脑才完全清醒。 :)