在 HTML/JavaScript 中嵌入动态页面答案

【问题标题】：Dynamic page embedding in HTML/JavaScript在 HTML/JavaScript 中嵌入动态页面
【发布时间】：2020-11-25 16:07:32
【问题描述】：

我的 HTML 页面中有这样的标签：

<embed src="http://..." style='...'>

使用 Python-Flask，我交出一个不同的源地址并将其存储在 window.dynamicEmbedding 中。现在我想以紧凑的方式在页面加载时动态更改 src 值。我想象这样的事情

<embed src=<script>document.write(window.dynamicEmbedding)</script> style='...'>

这肯定是不可能的。无论如何，无需大量编码即可实现这一点？

【问题讨论】：

标签： javascript python html dynamic embedding

【解决方案1】：

这取决于您决定提供哪些网址的逻辑。如果你只是想要一个随机的 url，那在 javascript 中会很容易。只需将 url 放在一个数组中，然后使用 math.Random 来选择一个索引。每次页面加载时，都会生成一个新的随机索引，并选择一个新的 url 传递给您的嵌入。

由于您使用的是烧瓶，因此更简单的方法 - 特别是如果您需要比随机更复杂的选择标准 - 将选择逻辑写入 python，并且只将选定的 url 传递给模板。你有一个这样的烧瓶视图：

import random

@app.route('/')
def video_page():
    urls = ['1','2','3','4','5','6','etc']
    url_selection = random.choice(urls)
    return render_template('video_page.html', url=url_selection)

【讨论】：

嗯......不幸的是我不能直接使用烧瓶，因为我使用 JQuery 选项卡。因此 index.html 导入选项卡，其中一个选项卡嵌入了外部网页。因此，我可以将嵌入页面的源代码从烧瓶移交给 index.html（如您所述），但不能以烧瓶方式移交给选项卡，即需要一些 javascript。
现在通过添加

并调用 var myEmbedding = `
JS 可以直接将值传递给嵌入标签的 src 属性。使用 src="" 将嵌入保留在 HTML 中，然后使用 $(#myDynamicEmbedding).setAttribute("src", window.dynamicEmbedding); 使用脚本标记