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.
Related
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.
I am getting problem in referencing Javascript file.
My all js files reside in my js folder:MyProject/Js/*.js
Now on my master page i am refering my file like this:
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
Error showing in console:
SyntaxError: expected expression, got '<'.
On searching i have found that this issue comes due to inappropriate referencing of js files so i have resolve this error by doing this:
<script src="../js/jquery-1.9.1.js"></script>
<script src="../js/jquery-1.9.0.min.js" type="text/javascript"></script>
This above solution works when my .aspx page would be like this:
MyProject/Admin/Abc.aspx //This will work
But problem will occur when any of my .aspx page would be like such:
MyProject/Admin/Subfolder/Abc.aspx // This will not work
My Abc.aspx page contains master page but now in this case this will not load my js files due to ../
So can anybody tell me whats the correct way to reference js files which will work in both the cases??
Note:I am referencing all js files in to my master page and my master page is in:
MyProject/MasterPage.Master
I think you can give a try:
1) Use Bundling to reduce the loading time (Your script will be shorter as well)
2) Use ~/ instead of ../ to make your script/code work even if you relocate the pages.
You can easily find the scripts and codes of jquery bundle if you create a new ASP.NET application in Visual Studio.
In my assets/www/index.html, I am trying to open html in the
/data/data/files/xyz/index.html with this javascript command:
window.location.href = cordova.file.dataDirectory + "xyz/index.html";
In the ../xyz/index.html it also included the cordova.js which exists on the same xyz directory:
<script type="text/javascript" src="cordova.js"></script>
The index.html can be loaded, but in the catlog show error like below
W/CordovaWebViewImpl﹕ Blocked (possibly sub-frame) navigation to
non-allowed URL: gap://ready
is there something wrong with my method? Is it wrong to use window.location.href to open another cordova application in the data folder ?
EDIT : I already found the root cause, that is my cordova.js in the /data/data/files/xyz/cordova.js is having different version with the one in asset folder. after i copied the same cordova js version, it can be loaded without error warning. Thanks.
You don't need to use "cordova.file.datadirectory". That's only if you use the file plugin for accessing data files, such as saving high-scores in a game or level data. You do not use the plugin for loading/unloading pages into the current webview.
You would want all of your HTML files to be in the same folder branch as your "index.html". Assume a directory structure like this:
/ index.html <!---- this is your current index.html
/ page2.html
/ js / index.js
/ xyz /index.html
All you would have to do is window.location='xyz/index.html'. However, I strongly encourage you to not replace entire pages if you're developing for iOS. It's almost a guarenteed way to get your app rejected. Try loading your pages in via AJAX using a framework like "Framework7".
NOTE: You can only view files within the webview, that are in the same folder or are children of, as your initial index.html.
EDIT: You want to load another Cordova webview application. I'd suggest still making it a child of the initial "index.html" folder. However, you might be able to write a plugin or customize the platform itself to access the other files. However, that's out of the scope of this question!
I use jQuery in my web project.
When I use local reference like this;
<script src="../../Scripts/jquery-1.7.1.js" type="text/javascript"></script>
I receive this error:
$ is not a function
but when I use the Google reference in my project like this
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
Everything works fine.
It is noteworthy I use telerik component in my project.
It looks like the problem is simply that the relative path for the import is incorrect. Hence it's not loading jQuery and the call to $(document).ready is undefined.
You need to correct the path to the Scripts folder.
most probably ur not loading jquery right
Take these steps :
use developper tools in your browser (my favorite is firebug for firefox)
go to the scripts tab and check if jquery.js is there
if its there and its empty, check the url, maybe ur relative path is incorrect. to verify it you can put the url in your browser and fix it until the js file loads
I am currently trying to implement a jquery slider into a joomla website.
I already implemented NoConflict(); so that it doesn't step into joomla. And it works, BUT for another reason wich I do not understand it enters another jquery file called jsloader.js of a plugin I use for picture gallery display.
I suppose all the module jquery files get preloaded before the one im calling inside the template.
it enters the function() in the jsloader.js instead of the one in my jquery file.
How Can I force it to enter my jquery file instead of other
The first problem is that you've got the jquery.js file coming after the jsloader.js file. You need to make sure that jquery.js is included before any plugins - the order is important.
The second problem is that this:
<script type="text/javascript" src="//templates/template/js/jquery-1.2.6.min.js"></script>
Doesn't do what you think. When there are two slashes at the beginning of the URL, the browser interprets the first entry after the double-slash as the hostname, not a directory. What you actually want is:
<script type="text/javascript" src="/templates/template/js/jquery-1.2.6.min.js"></script>
With only one slash.
In case you're wondering, the reason for this is so that you can specify a file on a different host, but using the same scheme. So if you have a page that works in HTTP and HTTPS, then you can specify files on a different site, using the same scheme (HTTP vs. HTTPS) by using the src="//example.com/script/whatever.js" format.