jQuery 更改 iFrame 的内容

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9490907/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-27 10:53:07  来源:igfitidea点击:

jQuery changing contents of an iFrame

jqueryiframe

提问by mavix

I'm completely new to using jQuery. Why isn't this working?

我对使用 jQuery 完全陌生。为什么这不起作用?

<iframe width="800" scrolling="no" id="prev" src="">your browser needs to be updated.
</iframe>
<script src="jquery.js"></script>
<script>
    //var c = 0;
    $(document).ready(function() {
        $('#prev').contents().html("<html><body><div> blah </div></body></html>");
    })
</script>

Also, I am planning on using this iFrame to present a preview of changes to an html file to a user. I am going to either empty the entire iFrame every time a change is made or, if I can figure out how to do so, change particular lines using jQuery. Is that the best way to go about this?

此外,我计划使用此 iFrame 向用户显示对 html 文件所做更改的预览。每次进行更改时,我要么清空整个 iFrame,要么,如果我能弄清楚如何这样做,则使用 jQuery 更改特定行。这是最好的方法吗?

回答by ShankarSangoli

If you want to update the iframecontent using html then you should first find the bodyelement inside the iframeand then append the required markup.

如果要iframe使用 html更新内容,则应首先在 中找到body元素iframe,然后附加所需的标记。

$(document).ready(function() {
    $('#prev').contents().find('body').html('<div> blah </div>');
});

Working demo - http://jsfiddle.net/ShankarSangoli/a7r9L/

工作演示 - http://jsfiddle.net/ShankarSangoli/a7r9L/

回答by Ahsan Horani

I have created a PHP script that can get all the contents from the other website, and most important part is you can easily apply your custom jQuery to that external content. Please refer to the following script that can get all the contents from the other website and then you can apply your cusom jQuery/JS as well. This content can be used anywhere, inside any element or any page.

我创建了一个 PHP 脚本,可以从其他网站获取所有内容,最重要的部分是您可以轻松地将自定义 jQuery 应用于该外部内容。请参考以下脚本,可以从其他网站获取所有内容,然后您也可以应用您的自定义 jQuery/JS。此内容可以在任何元素或任何页面内的任何地方使用。

<div id='myframe'>

  <?php 
   /* 
    Use below function to display final HTML inside this div
   */

   //Display Frame
   echo displayFrame(); 
  ?>

</div>

<?php

/* 
    Function to display frame from another domain 
*/

function displayFrame()
{
    $webUrl = 'http://[external-web-domain.com]/';

    //Get HTML from the URL
    $content = file_get_contents($webUrl);

    //Add custom JS to returned HTML content
    $customJS = "
    <script>

      /* Here I am writing a sample jQuery to hide the navigation menu
         You can write your own jQuery for this content
      */
      //Hide Navigation bar
      jQuery(\".navbar.navbar-default\").hide();

    </script>";

    //Append Custom JS with HTML
    $html = $content . $customJS;

    //Return customized HTML
    return $html;
}