Question

我想做的是，仅使用html和js（如果可能），而不更改站点位置（例如，从example.com/snippet1更改为example.com/snippet）。我想避免加载整个文档（例如，避免加载其中的10个“片段”，每个片段大约〜500行，而是在删除其余片段时选择我要加载的片段）。

这是我想到的选择器的一个例子，我可以用js添加一个监听器

<select>
    <option value="1">Snippet 1</option>
    <option value="2">Snippet 2</option>
</select>

代码段1：

<div class="s1">
    <p>something</p>
    <img src="s1.jpg"/>
</div>

代码段2：

<div id="s2">
    <div class="s2">
        <iframe src=""></iframe>
    </div>
</div>

这与更改类或id无关，因为它们之间的结构可以不同。目的是尝试使其在PHP中像include一样工作。

Answer 1

您可以通过使用jQuery load并从外部html文件中请求摘要来轻松实现这一目标。

这是一个非常简单的示例，其中您的代码段文件名必须与选择选项值相对应，但是您可以为更复杂的文件名或位置添加映射。

有关jQuery加载的参考：http://api.jquery.com/load/

主要js

$('select').on('change', function(event) {
  $('#content').load('snippet' + event.target.value + '.html');
});

index.html

<select>
    <option value="1">Snippet 1</option>
    <option value="2">Snippet 2</option>
</select>
<div id="content"></div>

snippet1.html

<div class="s1">
    <p>something</p>
    <img src="s1.jpg"/>
</div>

snippet2.html

<div id="s2">
    <div class="s2">
        <iframe src=""></iframe>
    </div>
</div>

Answer 2

乍看之下，使用普通的JS或jQuery似乎很容易，但是由于您要添加和更改内容，因此通常会变得非常麻烦。我很难学。这也提供了更好的开发人员体验，并且编写错误的代码变得更加困难。我建议选择一个库，例如这是React。

https://reactjs.org/

我在这里使用静态代码段，但您也可以从服务器一一加载它们（称为代码拆分）。

class MyApp extends React.Component {
  constructor() {
    super();
    this.state = {
      currentSnippet: "1"
    };
  }
  
  changeSnippet(e) {
    this.setState({currentSnippet: e.target.value});
  }
  
  render() {
    return (
      <div>
        <select 
          value={this.state.currentSnippet} 
          onChange={e => this.changeSnippet(e)}
        >
          <option value="1">Snippet 1</option>
          <option value="2">Snippet 2</option>
        </select>
        
        {this.state.currentSnippet === "1"
          ? <Snippet1 />
          : <Snippet2 />
        }
      </div>
    );
  }
} 

class Snippet1 extends React.Component {  
  render() {
    return (
      <h1>
        Hi, Im snippet 1
      </h1>
    );
  }
} 

class Snippet2 extends React.Component {  
  render() {
    return (
      <h2>
        Hi, Im snippet 2
      </h2>
    );
  }
} 

ReactDOM.render(<MyApp />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app"></div>

Answer 3

有很多方法可以实现-一种基于香草javascript的简单方法是迭代文档中需要获取摘要的所有<div/>元素，然后通过{{1 }}来获取并插入这些片段的HTML。此方法涉及将片段URL作为数据属性添加到PHP脚本呈现的页面上显示的片段中：

fetch()

window.addEventListener('load', () => {

  // For each element with data-url attribute
  document.body.querySelectorAll('[data-url]').forEach(snippetWrapper => {
  
    // Use fetch to get html snippet via url data attribute
    fetch(snippetWrapper.dataset.url)
    .then(response => response.text())
    // Assign the html to snippet wrappers innerHTML
    .then(html => { snippetWrapper.innerHTML = html; })  
  })  
})




/* Ignore this - just added so code snippet works */
async function fetch(url) {

    if(url === 'example.com/snippet1/') {
      return { 
        text : async () => 
        ` <img src="s1.jpg"/>` 
      }
    }
    
    if(url === 'example.com/snippet2/') {
      return { 
        text : async () => 
        `<div class="s2"><iframe src=""></iframe></div>` 
      }
    }
}

在同一页面上按需提供HTML代码段

3 个答案: