用 iframe 替换 div 中的内容 [英] Replacing content within a div with an iframe

问题描述

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

I am trying to replace the content of a div with an iframe that allows the user to input a URL to display another page. I will, ideally, add another button next to the Change URL button that links to a specific page.

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

However, I cannot get this code to work. I can get the div to be replaced with text and some html. But the iframe code won't load when I put this in. I am suspecting it's due to the quotation marks.

我是 javascript/JQuery 的新手，因此我们将不胜感激.

I am a bit of a novice at javascript/JQuery so any help with this will be greatly appreciated.

这是我对下面的代码所做的.

Here is what I have going for the code below.

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

推荐答案

你引用的字符串全错了.试试这个:

Your quoted string is all wrong. Try this:

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

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

Also, your click event is not being bound to the button after the button is created. You can make it persistent on the button's container like this:

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

如果您要弄乱 DOM，则必须确保在运行代码时已经创建了要操作的元素:

And if youre going to mess with the DOM, you have to be sure that the element you want to manipulate has already been created when your code is run:

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

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

but maybe you should be creating elements instead of dumping markup into the container:

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);
  }
}

不确定该事件侦听器是否可以工作，必须尝试看看:)

Not sure if that event listener will work, got to try it and see :)

你有没有试过只做这件事而不搞乱 DOM?...

Have you tried just doing it without messing around with the DOM?...

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

无论如何，为了安全起见，大多数浏览器都不允许您将 iframe 导航到不同的域，所以这可能是徒劳的.

Most browsers wont let you navigate the iframe to a different domain for security anyway, so maybe this is all for nothing.

这篇关于用 iframe 替换 div 中的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！