Question

我正在尝试创建一个包含iframe的网页，其中iframe具有可自定义的内容。它是一个API项目。我的主要问题不是如何使用jQuery管理向iframe附加内容，但在这种情况下，我有一个空的iframe，我想在其中插入一个完整的网页。进入iframe的网页代码是使用.post函数接收的，其中我获得了数据变量中的完整网页。我无法插入完整的代码，其中包括带有重要JavaScript库的本地javascript。就好像它不会在iframe中执行代码一样。插入代码但是从数据变量中传递的代码中删除了所有主要的html / body等标签，这会阻止各种javascript代码工作。我当然检查过在数据变量中收到的页面是所有代码。它是正确的。 iframe中显示缺少的标签。

（父页面，我不知道作为API提供商的域名）

<body>
<iframe id="EMSNLframe" srcdoc="" seamless></iframe>

<script>
$("#EMSNLframe").load(function(){
  $.post("https://api.educationalmedia.se/API_displayNTNewsLetterMenu",
  {
  ResUID:"[secret code]",
  MenuLanguage:"English",
  PDFLanguage:"" // Blank for all languages, or state a language 
  },
  function(data,status){
    $("#EMSNLframe").contents().find("html").html(data); //<---- this is the line I need a solution for! If there is any.
  });
  $("#EMSNLframe").contents().find("head").append($("<style>  #EMSNLmenu{font-family:'Arial',sans-serif;font-size:12px}  </style>"));
});
</script>
</body>

在数据变量中收到的网页：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
<meta charset="utf-8">

<link href="https://data.educationalmedia.se/styles/kendo.common.min.css" rel="stylesheet" type="text/css" >
<link href="https://data.educationalmedia.se/styles/kendo.default.min.css" rel="stylesheet" type="text/css" >
<script src="https://data.educationalmedia.se/js/jquery.min.js"></script>
<script src="https://data.educationalmedia.se/js/kendo.core.min.js"></script>
<script src="https://data.educationalmedia.se/js/kendo.popup.min.js"></script>
<script src="https://data.educationalmedia.se/js/kendo.menu.min.js"></script>

</head>
<body>
<div class="EMSNLmenu">
<!--#4DHTML HTMLmenu_t-->  Don't mind this line of code. It is server side tags for data 
</div>

<script>
$("#EMSNLmenu").kendoMenu({
 animation: { open: { effects: "fadeIn" } },
 orientation: "vertical",
 closeOnClick: true,
 openOnClick: true,
 direction: "bottom right"
});
</script>
</body>
</html>

使用jQuery在iFrame中插入完整的html页面

0 个答案: