从传递一个变量<script> to HTML code?

Question

我想将在<script>标记之间声明的变量传递给iframe标记中的URL，如下所示：

<script>
   var1 = 1;
</script>

<iframe src="http://link_to_site?param=var1>

但这是行不通的。 有可能做到这一点，我应该怎么做？

谢谢

Answer 1

首先，您需要一种方法来识别JavaScript代码中的目标元素。 例如，给元素一个id属性：

<iframe id="myIframe" />

（肯定还有其他方法来标识元素。可以构造相当复杂的查询来标识整个DOM中的特定元素。但是，至少对于本示例来说， id是一种特别简单的方法。）

然后，在您的JavaScript代码中，您将获得对该元素的引用并设置其src属性：

var var1 = 1;
document.getElementById('myIframe').src = 'http://link_to_site?param=' + var1;

需要注意的一件事是，该代码在页面上存在该元素之后需要执行。 如果它在页面上的该元素上运行，则该元素将不存在，并且getElementById()将不返回任何内容。

“之后”可能意味着它立即运行，但在页面上比元素“低”。 否则可能意味着代码被放置在页面上的任何位置，但是直到稍后才真正执行，例如在事件处理程序中。

Answer 2

*仅供参考-很抱歉，接受的答案实际上不起作用。 参见下文。 *

我建议您使用jQuery JS库来协助完成您的任务。 它规范化了JS环境，因此您不必担心用户使用的浏览器。

它还使执行某些简单任务（如获取特定元素等）变得更加容易。

以下代码显示了页面加载完成后如何动态创建iFrame。 这很重要，因为JS同步运行：换句话说，如果您为特定元素编写JS，但该元素在页面上尚不存在，则JS将失败。

通过将代码包装在：

$(document).ready(function(){})

您要确保在执行JS之前页面将完成加载。

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

<body>

</body>

<script type="text/javascript">
    var1 = 1;
    $(document).ready(function(){
        var theiFrame = '<iframe src="http://link_to_site?param=' + var1 + '">';
        $('body').append(theiFrame);    
    })
</script>

iFrame有点怪异之处，因为它们使文档的“ onload”事件变得混乱。 这是将iFrame动态添加到DOM而不是将其添加为HTML标签的另一个原因。 阅读本文以获取更多信息：

http://www.aaronpeters.nl/blog/iframe-loading-techniques-performance

从传递一个变量<script> to HTML code?

问题描述

2 个解决方案

解决方案1
3 已采纳 2016-02-25 14:20:17

解决方案2
1 2016-02-25 14:17:59

从传递一个变量<script> to HTML code?

问题描述

2 个解决方案

解决方案1 3 已采纳 2016-02-25 14:20:17

解决方案2 1 2016-02-25 14:17:59

解决方案1
3 已采纳 2016-02-25 14:20:17

解决方案2
1 2016-02-25 14:17:59