Question

我想统一我网站的导航布局，所以我创建了一个单独的html文件，其中包含导航代码。我使用JS动态加载文件：

$("#navigation").load("/navigation/navigation.html", function() {
   $.getScript('/material.min.js');
});

问题是对于这个html中的动态加载组件没有执行material.min.js，我失去了一些关键功能。我该如何解决这个问题？

Answer 1

检查componentHandler是否已加载，并尝试在加载后升级元素。

if(!(typeof(componentHandler) == 'undefined')){
  componentHandler.upgradeAllRegistered();
}

How the Component Handler works

简而言之，这涵盖了所有已注册的组件。使用提供的CSS类查询所有节点。循环遍历这些并逐个实例化它们。在节点上完成升级时，已升级的对象将添加到数据集中。此对象包含逗号分隔的组件classAsString属性列表，用于标识已完成的升级。

Answer 2

来自官方docs：

Material Design Lite将在页面加载时自动注册并呈现标有MDL类的所有元素。但是，在您动态创建DOM元素的情况下，您需要使用import java.io.File; import java.io.IOException; import java.util.regex.Matcher; import java.util.regex.Pattern; import com.itextpdf.text.io.RandomAccessSourceFactory; import com.itextpdf.text.pdf.PdfReader; import com.itextpdf.text.pdf.RandomAccessFileOrArray; import com.itextpdf.text.pdf.parser.ContentByteUtils; import com.itextpdf.text.pdf.parser.PdfTextExtractor; public class Import { private final static Pattern actualWordPattern = Pattern.compile("\\((.*?)\\)"); public static void importFromPdf(final File pdfFile) throws IOException { PdfReader reader = new PdfReader(pdfFile.getAbsolutePath()); Matcher matcher; String line, extractedText; boolean anyMatchFound; try { for (int i = 1; i <= 16; i++) { byte[] contentBytes = ContentByteUtils.getContentBytesForPage(reader, i); RandomAccessFileOrArray raf = new RandomAccessFileOrArray(new RandomAccessSourceFactory().createSource(contentBytes)); while ((line = raf.readLine()) != null && !line.equals("BT")); extractedText = ""; while ((line = raf.readLine()) != null && !line.equals("ET")) { anyMatchFound = false; matcher = actualWordPattern.matcher(line); while (matcher.find()) { anyMatchFound = true; extractedText += matcher.group(1); } if (anyMatchFound) extractedText += "\n"; } System.out.println(extractedText); System.out.println("+++++++++++++++++++++++++++"); String properlyExtractedText = PdfTextExtractor.getTextFromPage(reader, i); System.out.println(properlyExtractedText); System.out.println("---------------------------"); } } catch (IOException e) { throw e; } finally { reader.close(); } } public static void main(String[] args) { try { importFromPdf(new File("0116_LR.pdf")); } catch (IOException e) { e.printStackTrace(); } } }函数注册新元素。

因此，再次加载material.js脚本将不会执行它。但您可以通过将upgradeElement应用于整个加载的标记或特定元素来对upgradeElements进行一些实验。

Material Design Lite JS不适用于动态加载的html文件

2 个答案: