javascript - 使用 jQuery 从 URL 弹出 iFrame

标签 javascript jquery html jquery-mobile iframe

我继承了一些代码,我正在尝试添加一个增强功能来打开 popup使用 URL 样式 iframe。代码的布局方式是在 html 窗口中有不同的 tab-panes,在“内容”选项卡中,它在 #post-body 中显示信息(在内容选项卡内)。在内容选项卡中,其中一条信息是 URL。

目前的代码是这样的:

HTML:

    <!-- Tab panes -->
        <div class="tab-content" style= "height: 100%;">
          <div class="tab-pane" id="top-assoc"></div>
          <div class="tab-pane active" id="top-rank"> </div>
          <div class="tab-pane" id="top-tags"></div>
          <div class="tab-pane" id="content-body-tab" style="height: 100%;">
            <div id="post-body" style="padding: 15px;"> Select a post to preview </div>
          </div>
        </div>

JS:

$("#post-body").append($('<div>').addClass("post-view").append(
    [$('<p>').append($('<span>').addClass('bold').text("Post: ")),
        $('<div>', { "style": "font-size: 20px;"}
        ).html(postObj.content),
        $('<div>', { "style": "padding-top: 10px;"})
            .append($('<span>').addClass('bold').text("URL: "))
            .append($('<a>', { "href": postObj.url,
                "target": "_blank" }).html(postObj.url))),
        $('<div>', { "style": "padding-top: 10px;"})
            .append($('<p>', { "style": "overflow-wrap: break-word"})
                .append($('<span>').addClass('bold').text("Users: "))...morecode

所以我所做的改变是我在 html 中添加了一个 div 并在 javascript 中添加了一个 onclick 函数。看起来像

HTML:

      <div class="tab-pane" id="content-body-tab" style="height: 100%;">
        <div id="post-body" style="padding: 15px;"> Select a post to preview </div>
        <div id="post-frame" data-role="popup"><iframe id="framecontent" src="" width="80%" height="500"></iframe></div>
      </div>

JS:

 $('<div>', { "style" : "padding-top: 10px;"})
 .append($('<span>').addClass('bold').text("URL: "))
 .append($('<a>', { "href": postObj.url,
                    "target" : "_blank" }).html(postObj.url)).on("click", function() {
         $(#framecontent).attr("src", postObj.url);
     }),

我认为应该可行,但根据 $(#framecontent).attr("src ", postObj.url);

我不确定为什么这不起作用?感谢您的帮助。

最佳答案

$(#framecontent).attr("src", postObj.url);

需要

$('#framecontent').attr("src", postObj.url);

不明白的可以去查http://www.w3schools.com/jquery/jquery_selectors.asp

它也可以是另一回事,但如果没有完整的代码,就很难弄清楚是什么。

关于javascript - 使用 jQuery 从 URL 弹出 iFrame,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30983674/

相关文章:

javascript - 如何使 $(document).ready() 函数全局可用?

jquery - 如何替换/替换属性名称,而不是其内容

jquery - 单击时,隐藏 div 并删除所需的属性

html - 如何移动添加到购物车按钮旁边的数量输入字段 - wordpress

javascript - PHP/Ajax 联系表单重定向到 PHP 文件

javascript - Android:使用 JavaScript for Chart.js 的 WebView 无法正常工作

javascript - 尝试根据变量值更改要播放的动画

JavaScript 未执行

jquery - 如何使用 bootstrap.css 处理网页设计表单到中心页面和版权到底部中心

javascript - YouTube嵌入了react控件,播放onclick