Question

我有一个在线托管的网页，我希望我可以使用一些JavaScript将IFRAME插入另一个网页。

这怎么可能是最好的方式，我只是将我的网页网址添加到JavaScript并且它适用于所有浏览器？

由于

Answer 1

您可以使用：

<script type="text/javascript">
    function prepareFrame() {
        var ifrm = document.createElement("iframe");
        ifrm.setAttribute("src", "http://google.com/");
        ifrm.style.width = "640px";
        ifrm.style.height = "480px";
        document.body.appendChild(ifrm);
    }
</script>

还要检查basics of the iFrame element

Answer 2

最好将HTML作为模板处理，而不是通过JavaScript构建节点（毕竟HTML不是XML。）您可以使用模板保持IFRAME的HTML语法清晰，然后将模板的内容附加到另一个DIV中。 / p>

<div id="placeholder"></div>

<script id="iframeTemplate" type="text/html">
    <iframe src="...">
        <!-- replace this line with alternate content -->
    </iframe>
</script>

<script type="text/javascript">
var element,
    html,
    template;

element = document.getElementById("placeholder");
template = document.getElementById("iframeTemplate");
html = template.innerHTML;

element.innerHTML = html;
</script>

Answer 3

所以我尝试使用谷歌控制台 API 密钥将 youtube 视频嵌入到我的 index.html 中，这是我制作的功能：

const searchVideos = async (key, search, maxResVideos) => {
    const config = { params: { key: key, q: search } }
    let res = await axios.get(`https://www.googleapis.com/youtube/v3/search?part=snippet&type=video&maxResVideos=${maxResVideos}`, config);
    console.log('res:', res.data.items);
    res.data.items.forEach(item => {

        const video = document.createElement('div');
        video.innerHTML = `<iframe width="560" height="315" src="https://www.youtube.com/embed/${item.id.videoId}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`;
        searchResult.appendChild(video);
    });
}

您仍然可以进行更改，但这会通过创建一个 div 并将 iframe 作为字符串模板文字来放置嵌入视频...

使用JavaScript创建IFRAME

3 个答案: