Javascript 用iframe替换div中的内容

我试图用iframe替换div的内容，iframe允许用户输入URL以显示另一个页面。理想情况下，我会在链接到特定页面的ChangeURL按钮旁边添加另一个按钮

但是，我无法使此代码正常工作。我可以用文本和一些html替换div。但是当我把这个放进去时，iframe代码不会加载。我怀疑是引号引起的

我在javascript/JQuery方面有点新手，因此对此的任何帮助都将不胜感激

下面是我对下面代码的理解

        <style>
    #target {
        width: 200px;
        height: 340px;
    }
    </style>
    <script>
    $(function load($){
        var $iframe = $('#target'),
            $change = $('#change'),
            $url = $('#url');

        $change.click(function url() {
            $iframe.attr('src', $url.val());
        });
    });

    document.getElementById("c_emot").innerHTML = "<iframe id="target" src="/"></iframe><br>
<input id="url" type="text"><br>
<button id="change" type="button">Change URL</button>";
    </script>

#目标{
宽度：200px；
高度：340px；
}
$（函数加载（$）{
变量$iframe=$（“#目标”），
$change=$（“#change”），
$url=$（“#url”）；
$change.click（函数url（）{
$iframe.attr（'src'，$url.val（））；
});
});
document.getElementById（“c_emot”）.innerHTML=“



更改URL”；

您引用的字符串完全错误。试试这个：

document.getElementById("c_emot").innerHTML = '<iframe id="target" src="/"></iframe><br>
<input id="url" type="text"><br><button id="change" type="button">Change URL</button>';

如果要处理DOM，必须确保在运行代码时已经创建了要操作的元素：

$(document).ready(function(){
   // put all your code here
});

但也许您应该创建元素，而不是将标记转储到容器中：

document.onreadystatechange = function () {
  if(document.readyState == "complete") {
    var container = document.getElementById("c_emot");

    var iframe = document.createElement('iframe');
    iframe.src = "/";
    container.appendChild(iframe);

    var input = document.createElement('input');
    input.id = "url";
    input.type = "text";
    container.appendChild(input);

    var button = document.createElement('button');
    button.id = "change";
    button.innerHTML = "Change URL";
    button.addEventListener('click', function() {
        iframe.src = input.value;
    });
    container.appendChild(button);
  }
}

不确定该事件侦听器是否工作，请尝试并查看：）

你有没有试过在不干扰DOM的情况下做这件事

<iframe name="urlbox"></iframe>
<input type="text" id="urlinput" />
<button onclick="window.open(document.getElementById('urlinput').value, 'urlbox')">Navigate!</button>

导航！

---

大多数浏览器都不允许您为安全起见将iframe导航到不同的域，因此可能这一切都是徒劳的。

此演示有两个功能：

使用文本输入，用户可以输入URL来更改iframe的

src

*

• 这可以通过使用此功能实现：

  函数更改src（src）{
  var iframe=document.getElementById（'site'）；
  site.src=src；
  }

• *请注意，并不是所有的网站都是iframe友好的，所以请期待一些我的功能根本不适用的网站

请注意各个站点的链接。他们的行为已经被改变——它不是跳转到站点，而是在iframe中打开站点

• 每个链接都是一个正常构造的锚元素
  遗憾的是，这也不起作用。我得到了同样的结果。我可以用文本替换这个字符串。我得到的结果与以前使用的字符串相同：我用另一种插入内容的方式编辑了我的答案。不确定是否所有的工作，但它值得一试：）嘿，这是朝着正确的方向迈出的一步。它将其添加到div中，而不是用新内容替换div。我称之为进步，因为它比我们目前所取得的要好。xD同样，当输入url时，它会导致页面刷新。尽管如此，还是要继续进行。请注意

  窗口中的
  urlbox
  。打开
  和
  iframe name
  确保您的代码与“允许用户输入URL以显示另一页的iframe”匹配–如果您指的是来自任意网站的URL，请注意这对“所有”URL都不起作用。如今，许多网站使用
  X-Frames-Options
  标题禁止浏览器在不同域的（i）帧中显示其内容。因此，你在这里试图实现的目标可能被认为是从一开始就注定要失败的一半。
  <iframe name="urlbox"></iframe>
  <input type="text" id="urlinput" />
  <button onclick="window.open(document.getElementById('urlinput').value, 'urlbox')">Navigate!</button>