I need to somehow import a lot of html pages into one in electron(im using w2ui layout).
I have tried:
<iframe src="../map/index.html"></iframe>
but it does not work:
<script>require('./index.js');</script>
(Uncaught ReferenceError: require is not defined
at index.html:15)
From what I understand, you want to include the HTML from multiple files into one page.
You can do this by using jQuery
$('#elementToLoadHtmlInTo').load('url/pathToFile')
you could also try using the fs module in nodejs to load the content from your files and then add it to your file.
Related
I'm new to webpack and I would like to display some content to the html file. I am also using firestore to store some data that I would like to show.
I have tried multiple ways that would work in a normal JS file and when i write the script in a separate JS file they display in the browser.
Could anyone give me any advice on where to start with this I've also tried whats written on the webpack site but that also didnt work.
my friends. I am writing an simple app in electron framework-- basic just Node.js as end and HTML as front.
I try to use jquery lib in my html page like this :
$(document).ready(function(){})
The werid part is, if I run this HTML directly in browser, the jquery could work.But when I use it as a part of my electron project,ego:dependency. The jquery could not work.I have tried both use external source and local file.
I get a error like this:
Uncaught Reference Error: $ is not defined
And in the dev tool: the source panel could show the domain and the file I want to use.
But the network panel did not show correspond information as while open in browser does.
npm install jquery in your project then import jquery as $
I am using Gatsbyjs to generate a static site, this outputs a folder of static HTML files.
I have a requirement to host these HTML files on Microsoft SharePoint - this requires the .html to be converted to .aspx in order for them to run.
I have a postscript which updates all .html to .aspx (this works nicely).
However, all the generated links point to the folder:
link
In order for this to work on sharepoint, I need to update every href in each html file to point to the index.aspx file in each folder:
link
What's the best way to do on post build? Ideally, I'd like to include this as part of my post-build script. Can this be achieved with webpack? Or am I better off using something like JSDOM to loop through each file and update each of the links?
You are probably better off using cheerio, which is lighter than jsdom and supports most of the jquery syntax.
var html = fs.readFileSync(input.html);
const $ = cheerio.load(html);
var output = $('a[href="folder"').attr('href', '/folder/index.aspx').html();
I am trying to use the following library https://github.com/davidjbradshaw/iframe-resizer/ to resize an iFrame which is positioned inside an other iFrame.
What I tried is to:
copy the minified files of the library in a /assets/lib folder of my app.
add a link to the minified files of the library in the header of the first iFrame:
<script src="/assets/lib/iframeResizer.min.js"></script>
<script src="/assets/lib/iframeResizer.content.min.js"></script>
<script src="/assets/lib/index.js">
This last index.js file only exports the 2 previous files (using export and require). -> This creates an error export is not defined, and require is not defined.
Then, when I add an iFrame that needs to be resized, I use jQuery to insert the script that uses the library:
var script = '<script class="iframe-resizer">iFrameResize({checkOrigin: false}, ".content-card")</script>';
$('.fr-iframe').contents().find("body").append(script);
If I don't add the index.js file, I get the following message "iFrameResize is not defined"
Does anyone have an idea how I could find a workaround?
In fact, the library supports nested iframes.
Requesting the iFrameResizer using jQuery was the best solution I found.
Thanks to this I don't have to install the library manually in the header of the iframe, which simplifies the solution.
I am using clipboard.js to allow users to copy snippets of code from an API docs page.
<script> var clipboard = new Clipboard('.copyButton');</script>
When I run this script in my view the functionality all works as it should. However if i place the script in its own js file I get the error
Uncaught ReferenceError: Clipboard is not defined
I am using Yii2 framework so i am using assets to register sources like so:
public $js = [
"js/api.js",
];
And then I am registering that Asset inside of my main layout like so:
use metis\assets\ApiAsset;
ApiAsset::register($this);
Anyone got any ideas why?
It sounds like either the Clipboard object isn't being initialized in time, or the clipboard.js file is registered after the script that is using it. Can you verify from the client source that the clipboard.js file is defined before the script that is using it?