简体   繁体   English

如何将html和js代码包含到一个js文件中?

[英]how to include html and js code into one single js file?

I need to include an iframe, that has to be responsive , with no scroll in multiple websites. 我需要包含一个iframe,该iframe必须具有响应能力,并且不能在多个网站中滚动。 I need to do that wih one line of code like this: 我需要用一行这样的代码来做:

<script src="testfile.js"></script>

This is the html code that I have to somehow include in the testfile.js 这是我必须以某种方式包含在testfile.js中的html代码

<!doctype html>
<html class="no-js" lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Seamless.js | Beautiful, seamless iframes.</title>
  <script src="../build/seamless.parent.js"></script>
  <script type="text/javascript">
    window.onload = function() {
      window.seamless(document.getElementById('childpage'), {
        fallbackText: 'Having Trouble?'
      });
    };
  </script>
</head>
<body>
<div class="row panel">
  <div class="large-12 columns">
    <iframe id="childpage" src="example1.child.html?id=###"></iframe>
  </div>
</div>
</body>
</html>

I could only use the iframe part in order to have one single line of code: 我只能使用iframe部分来获得一行代码:

 <iframe id="childpage" src="example1.child.html?id=###"></iframe>

but i need the extra html and js, in order to have the iframe responsive and with adjustable width 但我需要额外的html和js,以使iframe响应并调整宽度

You cannot use HTML code inside your js explicitly, To edit the properties of your html tags you can do the following. 您不能在js中显式使用HTML代码,要编辑html标记的属性,可以执行以下操作。 Just use getElementsByTagName("iframe").style to fetch all the CSS refrences for iframes in your HTML page and you can accordingly set them. 只需使用getElementsByTagName(“ iframe”)。style即可获取HTML页面中iframe的所有CSS参考,即可进行相应设置。

<!doctype html>
<html class="no-js" lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Seamless.js | Beautiful, seamless iframes.</title>
  <script src="../build/seamless.parent.js"></script>
   <script type="text/javascript">
    window.onload = function() {
      window.seamless(document.getElementById('childpage'), {
        fallbackText: 'Having Trouble?'
      });
    };
  </script>
  <script src="testfile.js"></script>
</head>
<body onload="myFunction()">
<div class="row panel">
  <div class="large-12 columns">
    <iframe id="childpage" src="example1.child.html?id=###"></iframe>
  </div>
</div>
</body>
</html>

testfile.js testfile.js

function myFunction() {
  document.getElementsByTagName("iframe").style.overflow="hidden";
}

Respond in the thread if it worked. 如果可以,请在线程中响应。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM