Question

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

但是，我无法使用此代码。我可以用文本和一些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>

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

此外，创建按钮后，您的点击事件未被绑定到按钮。您可以将其保持在按钮的容器上，如下所示：

$('#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导航到另一个域以保证安全性，所以也许这一切都是无用的。

Answer 2

此演示有2个功能：

使用文字输入，用户可以输入网址来更改iframe的src。*
- 使用此功能可以实现：
  
  function changeSrc(src) { var iframe = document.getElementById('site'); site.src = src; }
- *请注意，并非所有网站都是iframe友好的，所以期待一些我的功能无法使用的网站。
请注意指向各个网站的链接。他们的行为已经改变 - 而不是跳到网站，它在iframe中打开网站。
- 每个链接都是一个正常构造的锚元素<a>，但有一个例外。它的属性target的值为site。
- site是iframe的name。当锚具有target=“ iframe名称”时，锚点会在该目标iframe中打开该网站。
- 这必须是iframe的name属性，而不是iframe的id。

代码段

function changeSrc(src) {
  var iframe = document.getElementById('site');
  site.src = src;
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
section {
  height: 100%;
  width: 100%;
  overflow-y: auto;
}

<form id="form" onchange="changeSrc(url.value);">
  <fieldset>
    <legend>Enter URL</legend>
    <input id="url">
    <input type="submit" />

  </fieldset>
</form>
<a href="/" target="site">ROOT</a>&nbsp;&nbsp;<a href="http://example.com" target="site">Example</a>&nbsp;&nbsp;<a href="http://w3schools.com" target="site">W3Scools</a>&nbsp;&nbsp;<a href="https://jsfiddle.net/user/dashboard/" target="site">jsFiddle</a>&nbsp;&nbsp;
<a
href="https://www.jsdelivr.com" target="site">jsDelvir</a>&nbsp;&nbsp;<a href="http://javascript.info" target="site">JavaScript Tut</a>&nbsp;&nbsp;<a href="https://plainjs.com/" target="site">Plain JS</a>
  <section>
    <iframe id="site" name="site" src="/" width="100%" height="100%" frameborder="0"></iframe>
  </section>

使用iframe

2 个答案: