JavaScript中带有IFrame的OnKeyUp [英] OnKeyUp with IFrame in JavaScript

问题描述

我非常需要帮助...我正在制作自己的基本文本编辑器.我有一个Iframe，用户可以在其中输入代码.

在iframe下方，有一个div隐藏.该div通常会捕获在IFrame中编写的内容，换句话说，用户将在上面的Iframe中键入的每个HTML和CSS代码，它将在下面的div中执行操作"OnKeyUp".

现在，下面的div(已隐藏)将仅在用户单击按钮时预览.结果，这将在"JQuery"对话框中弹出.简而言之，将通过JQuery UI对话框弹出div，以向用户显示他/她正在编码的结果.

我知道我们可以在textarea中做到这一点，这只是价值"的问题，但我无法通过iframe做到这一点.我做了这个:

I badly need help... I am making a basic text editor of my own. I have an Iframe where users can type their code in it.

Below the Iframe, there is a div which is hidden. This div normally will capture what is written in the IFrame, in other words, every HTML and CSS codes the user will type in the Iframe above, it will take action "OnKeyUp" in the div below.

Now the div below, as it is hidden, it will only be previewed if the user click on a button. As a result, this will pop up in a JQuery dialog box. In short, the div will be pop up through a dialog box of JQuery UI to show the user the result he/she is coding.

I know we can do this in textarea, it is just a matter of "value" but I am not getting it with Iframe. I made this:

function pcode () {
       var frame = document.getElementById(''code'').value;
       var div = document.getElementById(''preview'');
       divout.innerHTML = frameout;
   }

上面的代码只是要获取Iframe中编写的值，然后在OnKeyUp的下面的div中预览它.现在，一旦用户单击按钮，即可在JQuery UI对话框中预览div的代码:

The above code, is just to grab the value written in the Iframe, then preview it in the div below on OnKeyUp. Now, the code to preview the div in a JQuery UI dialog box once the user clicks on a button:

function preview() {
 $(''#preview'').dialog({modal:true, height:600, width:1280, title:"Preview", show:"slow", hide:"fast"});
 }
 $(''#previewbutton'').click(function() {
     preview();
 });

问题是没有任何作用.如果您不了解此问题，可以问我一些问题，我自己对此感到很压力.如果这是一个textarea，那么一切都会好起来的，就像我之前在textarea中所做的那样，还不错.

按照同样的思路，建议我在编写文本编辑器时使用IFrame，因为如果我使用textarea进行此操作，则用户代码可能与我自己的页面CSS代码冲突.我想知道是否有可能单独使用textarea代替iframe，以防万一没有解决方案，但是用户CSS和HTML代码一定不能与我自己的CSS代码冲突.例如，如果我声明了一个类或ID或将所有Heading 1标记为蓝色，并且用户在文本区域中键入Heading 1标记，则我的CSS代码也将适用于该用户，因此我不会不需要这个.

The problem is nothing is working. If you have not understood the issue, you can ask me some questions, I am myself stressed with this. Everything would be OK if it was a textarea as I did this before with textarea and was fine.

In the same line of thought, I have been advised to use IFrame when coding a text editor, because if I do this with a textarea, the user''s code can have conflicts with my own CSS codes of the page. I want to know if there a possibility to use textarea alone instead of Iframe, in case there is no solution, but the user CSS and HTML codes must not have conflicts with my own CSS codes. For example, if I have declared a class or ID or made all Heading 1 blue for instance, and if the user is typing Heading 1 tag in a textarea, the CSS codes of mine will apply to the user as well, so I don''t want this.

Thank!

推荐答案

(``#preview'').dialog({modal:true，height:600，width:1280，title:"Preview"，show :"slow"，hide:"fast"})); }

(''#preview'').dialog({modal:true, height:600, width:1280, title:"Preview", show:"slow", hide:"fast"}); }

(``#previewbutton'').click(function(){ 预览(); });

(''#previewbutton'').click(function() { preview(); });

问题是没有任何作用.如果您不了解此问题，可以问我一些问题，我自己对此感到很压力.如果这是一个textarea，那么一切都会好起来的，就像我之前在textarea中所做的那样，还不错.

按照同样的思路，建议我在编写文本编辑器时使用IFrame，因为如果我使用textarea进行此操作，则用户代码可能与我自己的页面CSS代码冲突.我想知道是否有可能单独使用textarea代替iframe，以防万一没有解决方案，但是用户CSS和HTML代码一定不能与我自己的CSS代码冲突.例如，如果我声明了一个类或ID或将所有Heading 1标记为蓝色，并且用户在文本区域中键入Heading 1标记，则我的CSS代码也将适用于该用户，因此我不会不需要这个.

谢谢！

The problem is nothing is working. If you have not understood the issue, you can ask me some questions, I am myself stressed with this. Everything would be OK if it was a textarea as I did this before with textarea and was fine.

In the same line of thought, I have been advised to use IFrame when coding a text editor, because if I do this with a textarea, the user''s code can have conflicts with my own CSS codes of the page. I want to know if there a possibility to use textarea alone instead of Iframe, in case there is no solution, but the user CSS and HTML codes must not have conflicts with my own CSS codes. For example, if I have declared a class or ID or made all Heading 1 blue for instance, and if the user is typing Heading 1 tag in a textarea, the CSS codes of mine will apply to the user as well, so I don''t want this.

Thank!

好的，这可以完成我所理解的即将完成的任务.
我确实注意到，如果我尝试链接到脚本或CSS等-实际上是iframe中任何基于文件的资源，我都必须为其提供完全限定的路径.从本地主机运行并留下< img src =''img/girl.png''/>之类的链接没有加载.
可以在localhost/enhzflep/img/girl.png中找到它-因为我已经在文件夹中运行文件了.

当我在Chrome中检查控制台时，它告诉我它无法加载资源-图像，并且失败的下载URL有点疯狂-[chrome-devtools://devtools/img/girl.png]

Okay this will do what I understand to be the bread-and-butter of the task at hand.
I do notice that if I try to linkn to a script or a css etc - in fact any file-based resource from the iframe, that I have to give it a fully qualified path. Running from localhost and leaving a link like <img src=''img/girl.png''/> wasn''t loading.
That should be found at localhost/enhzflep/img/girl.png - since I was already running the file from within my folder.

When I checked the console in Chrome, it told me that it couldn''t load a resource - the image, and that the failed download url was something crazy - [chrome-devtools://devtools/img/girl.png]

<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}
function newEl(tag){return document.createElement(tag);}
function newTxt(txt){return document.createTextNode(txt);}

function mInit()
{
    var src = byId('src');

    src.addEventListener('keydown', inputChange, false);
    src.addEventListener('keyup', inputChange, false);
    src.addEventListener('blur', inputChange, false);
    src.addEventListener('change', inputChange, false);
    inputChange();  // process any thing that's written in the text area when the page loads.
}

function inputChange()
{
    var tgt = byId('tgt');
    newText = byId('src').value;
    byId('tgt').src = "data:text/html;charset=utf-8," + escape(newText);
}

window.addEventListener('load', mInit, false);

</script>
<style>
body
{
    text-align: center;
}
iframe, textarea
{
    width: 45%;
    height: 300px;
}
.square
{
   width: 100px;
   height: 100px;
}
.red
{
   background-color: red;
}
</style>
</head>
<body>
<!-- The text inside the textArea starts here --!>
    <textarea id='src'><html>
<head>
<style>
.square
{
 width: 100px;
 height: 100px;
 border-radius: 50%; /* it sure aint square any more! */
}
.red
{
 background-color: blue;
}
</style>
</head>
<body>
<div class='red square'>This is red??</div>
</body>
</html>
<!-- The text inside the text area ends here -->
</textarea> <iframe id='tgt'></iframe>
    <div class='red square'>This is Red</div>
</body>
</html>

这篇关于JavaScript中带有IFrame的OnKeyUp的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！