Javascript iframe src页面添加动态输入不起作用答案

【问题标题】：Javascript iframe src page adding dynamic input not workingJavascript iframe src页面添加动态输入不起作用
【发布时间】：2020-10-09 18:25:11
【问题描述】：

我想在 div 内容 javascript 中添加输入，但没有添加

HTML：

<button onclick="Addcompntn();" class="btn btn-success">Add</button>
<iframe class="embed-responsive-item" src="index.html" allowfullscreen id="if1"></iframe>

脚本：

function Addcompntn() {
    var framedeki = document.getElementById('if1').contentWindow.document; 
    $('example').append('<div id="innerdiv" style="color:white;"></div>');
}

index.html

<div id="example" style="z-index:2"> //dynamic data will come here </div>

【问题讨论】：

iframe的来源和父页面是同一个域吗？
如果它不在同一个域中......并且您无权访问iframe 域的设置（以更改 CORS 策略）......这将是不可能的——如果它开启同一个域，不工作。您需要检查域的 CORS 策略并进行相应调整。 developer.mozilla.org/en-US/docs/Web/HTTP/….
是的，我在同一个目录和本地主机中工作

标签： javascript html

【解决方案1】：

尝试在 iframe 文档正文中添加元素：

function Addcompntn() {
    var framedeki = document.getElementById('if1').contentWindow.document;   
    var div = document.createElement("div");
    div.id = 'innerdiv';
    div.style.color = 'white';    
    framedeki.getElementById('example').append(div);
}

【讨论】：

谢谢，它成功了，我可以配置 div，但是如何在 div 中添加 div，而不是 body
@Muhammed 只需在 iframe 中获取您需要的元素并将该 div 附加到它。我已经更新了我的答案。