HTML页面嵌入外部站点的实现方法及R语言改写方案咨询

Hey there! Let's work through your problem of embedding one HTML page into another, plus cover how to adapt this with R later on.

一、先修复你的iframe问题 #

First, let's fix your original iframe code—there are two key issues:

1. 语法错误: Your src attribute was placed outside the <iframe> tag, which breaks the HTML structure.
2. URL完整性 + 跨域限制: You used google.com instead of the full URL (https://www.google.com), and importantly, Google sets an X-Frame-Options header that blocks embedding their site in iframes for security reasons. Most major sites do this, so you'll need to test with a site that allows iframe embedding (like your own static HTML page).

Here's the corrected iframe code (using a sample allowed URL for demonstration):

<!DOCTYPE html>
<html>
<body>
  <iframe src="https://example.com" height="200" width="300" frameborder="0"></iframe>
</body>
</html>

二、Iframe替代方案 #

If iframes aren't working (due to cross-domain restrictions or design needs), try these alternatives:

1. AJAX加载同域HTML内容 #

If the target HTML is on the same domain, you can use the Fetch API to load and inject its content directly into your page:

<!DOCTYPE html>
<html>
<body>
  <div id="embedded-content"></div>

  <script>
    fetch('path/to/your/local-page.html')
      .then(response => response.text())
      .then(html => {
        document.getElementById('embedded-content').innerHTML = html;
      });
  </script>
</body>
</html>

Note: This won't work for cross-domain sites unless the target server enables CORS.

2. Web Components (自定义元素) #

For a more modular approach, create a custom element to load external HTML:

<!DOCTYPE html>
<html>
<body>
  <embedded-html src="path/to/your/local-page.html"></embedded-html>

  <script>
    class EmbeddedHTML extends HTMLElement {
      connectedCallback() {
        const src = this.getAttribute('src');
        fetch(src)
          .then(res => res.text())
          .then(html => this.innerHTML = html);
      }
    }
    customElements.define('embedded-html', EmbeddedHTML);
  </script>
</body>
</html>

3. 服务器端包含 (适合后续R改写) #

If you're generating HTML via a server-side tool (like R), you can directly include the content of another HTML file during page generation—this avoids all front-end cross-domain issues. We'll cover this in the R section below.

三、用R改写HTML脚本的实施建议 #

Since you plan to rewrite this with R, here are the best tools and approaches:

1. Shiny框架 (推荐交互式场景) #

Shiny is perfect if you want to build interactive web apps with R. You can easily embed external HTML or use iframes with its built-in functions:

library(shiny)

# Define UI
ui <- fluidPage(
  # Option 1: Embed an external HTML file directly
  includeHTML("path/to/your/external-content.html"),
  
  # Option 2: Use an iframe (for allowed sites)
  tags$iframe(
    src = "https://example.com",
    height = 200,
    width = 300,
    frameborder = 0
  )
)

# Define server logic (empty for static content)
server <- function(input, output) {}

# Run the app
shinyApp(ui, server)

2. htmltools包 (静态HTML生成) #

If you just need to generate static HTML files, use htmltools to build your page and embed content:

library(htmltools)

# Build the HTML structure
page <- tagList(
  tags$body(
    # Include external HTML content
    includeHTML("path/to/your/local-page.html"),
    # Add an iframe
    tags$iframe(src = "https://example.com", height = 200, width = 300)
  )
)

# Save to HTML file
save_html(page, "output.html")

3. rmarkdown (文档+HTML结合) #

If you want to combine R code, text documentation, and embedded HTML, use rmarkdown. In your .Rmd file:

---
title: "Embedded HTML Page"
output: html_document
---

# My Page

## Embedded Content
```{r, echo=FALSE}
includeHTML("path/to/your/external.html")

Iframe Example #

Key Note for Cross-Domain Content #

If you need to embed a site that blocks iframes/CORS, you can use R's httr package to fetch the content server-side (ensure you have permission to scrape the site first), then inject it into your HTML:

library(httr)
library(htmltools)

# Fetch content (example only—check site's terms of service)
response <- GET("https://example.com")
content <- content(response, as = "text")

# Build and save HTML
page <- tags$body(HTML(content))
save_html(page, "scraped-content.html")

内容的提问来源于stack exchange，提问作者Adam Shaw