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

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

javascript jquery html iframe

Javascript 使用jQuery在iFrame中插入完整的html页面,javascript,jquery,html,iframe,Javascript,Jquery,Html,Iframe,我正在尝试创建一个包含iframe的网页，其中iframe具有可自定义的内容。这是一个API项目。我的主要问题不是如何管理使用jQuery将内容附加到iframe，但在本例中，我有一个空的iframe，希望在其中插入完整的网页。进入iframe的网页的代码是使用.post函数接收的，作为回报，我将在数据变量中获取完整的网页。我无法插入完整的代码，其中包括带有重要javascript库的本地javascript。这就好像它没有在iframe中执行代码一样。代码被插入，但所有主html/body

我正在尝试创建一个包含iframe的网页，其中iframe具有可自定义的内容。这是一个API项目。我的主要问题不是如何管理使用jQuery将内容附加到iframe，但在本例中，我有一个空的iframe，希望在其中插入完整的网页。进入iframe的网页的代码是使用.post函数接收的，作为回报，我将在数据变量中获取完整的网页。我无法插入完整的代码，其中包括带有重要javascript库的本地javascript。这就好像它没有在iframe中执行代码一样。代码被插入，但所有主html/body etc标记都从数据变量中传递的代码中删除，这会阻止各种javascript代码工作。当然，我已经检查了数据变量中接收到的页面是否是所有代码。这是正确的。在iframe中显示时，缺少的标记将丢失

（父页面，我作为API提供程序未知的域）


$（“#EMSNLframe”）.load（函数（）{
$.post（”https://api.educationalmedia.se/API_displayNTNewsLetterMenu",
{
ResUID:“[密码]”，
菜单语言：“英语”，
PDFLanguage://所有语言为空，或声明一种语言
},
功能（数据、状态）{
$（“#EMSNLframe”）.contents（）.find（“html”）.html（数据）；//除非我弄错了，否则我认为您不能从iframe外部修改iframe内容。您需要使用postMessage、ajax等来与iframe通信并相应地更新内容。我不确定边界是否会对iframe内容进行更改，但您肯定可以。我多次添加样式或进行其他修改.这次的不同之处在于我不需要添加一些内容，但需要一个包含javascript的完整页面，并且必须像往常一样加载，以便javascript可以对内容生效。
<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>