javascript - 用 iframe 替换 div 中的内容

Question

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

但是，我无法使这段代码工作。我可以将 div 替换为文本和一些 html。但是当我把它放进去时，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>

Answer 1

你引用的字符串都是错误的。试试这个:

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>';

供引用:http://www.javascripter.net/faq/quotesin.htm

此外，在创建按钮后，您的点击事件并未绑定(bind)到按钮。你可以像这样让它持久化在按钮的容器上:

$('#c_emot').on('click', '#change', (function(){
  $('#target').attr('src', $('#url').val());
});

如果你想弄乱 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 导航到不同的域以确保安全，所以也许这一切都是徒劳的。